立即回复

Question

我有一个看起来像这样的React组件：

var SendFormToServer = React.createClass({
    propTypes: {
        Values: React.PropTypes.object,
        getValues: React.PropTypes.func,
        sendToServer: React.PropTypes.func
    },
    getInitialState: function () {
        return {
            Values: this.props.Values
        };
    },
    handleClick: function (e) {
        var scope = this.props.getValues();

        this.setState({ Values: scope });
        this.forceUpdate();
        this.props.sendToServer(e);
    },
    render: function () {
        return (
            <div className="pull-right">
                <div id="model" style={{"display": "none"}}>
                    company = '{this.state.Values.Company}'{newLine}
                    user = '{this.state.Values.User}'{newLine}
                    notes = '{this.state.Values.Notes}'{newLine}
                </div>
                <input type="button" className="btn btn-success" onClick={this.handleClick} value="Submit" />
            </div>
            );
    }
});

问题是..是在handleClick（）完成后重新渲染。在stack.flow上提到的this.setState之后不会发生这种情况，并且它甚至不会发生在this.forceUpdate（）之后。

我需要在this.props.sendToServer函数被调用之前进行重新渲染。有没有办法做到这一点？或者我是否必须提出不同的解决方案？

Answer 1

this.setState()和this.forceUpdate()是异步函数，因此它们不会立即更新。但是你可以做的是将你的下一个函数作为回调传递给setState，如下所示：

this.setState({ Values: scope }, () => {
    this.props.sendToServer(e);
});

Answer 2

此处的解决方案首先要实现this.setState已经导致更新。如果你想同步进行第二次调用，你可以把它放在回调中：

this.setState({ Values: scope }, () =>  this.props.sendToServer(e));

应该照顾它。