reactjs - 立即响应重新渲染

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() 完成之后。它不会像 stackoverflow 上很多人提到的那样发生在 this.setState 之后，甚至不会发生在 this.forceUpdate() 之后。

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

Answer 1

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

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