javascript - 调用 Flux Store 操作时 setState 并未更新状态

Question

我有 2 个组件。一个项目容器和一个项目设置面板(稍后会有更多的项目设置面板)。

我在面板内有一个开关，调用“switchSubmit”函数来更新状态，然后调用“handleSubmit”函数，其中包含一个根据开关按钮的值更新 Flux Store 的操作，我正在设置状态，但是它似乎始终是调用我的操作时选择的先前值。

我读到 setState 不是同步的，并且我看过一些示例，但不知道如何应用正确的调用和函数来设置状态，并在调用此特定操作时准备好使用更新的状态我正在编写的代码。

这是我的代码:

var React = require('react/addons');
var Actions = require('../../Actions');
var ConfigurationStore = require('../../stores/Configuration');

var Controller = React.createClass({
    getInitialState: function () {

        ConfigurationStore.reset();

        Actions.getConfigurationSettings();

        return this.getStateFromStores();
    },

    getStateFromStores: function () {
        return {
            configuration: ConfigurationStore.getState()
        };
    },

    componentDidMount: function () {
        ConfigurationStore.addChangeListener(this.onStoreChange);
    },

    componentWillUnmount: function () {
        ConfigurationStore.removeChangeListener(this.onStoreChange);
    },

    onStoreChange: function () {
        this.setState(this.getStateFromStores());
    },


    render: function () {

        return (
            <section className="section-settings container">
                <h1 className="page-header">Projects</h1>
                <div className="row">
                    <div className="col-sm-12">
                        <div className="row">
                            <div className="col-sm-3">
                            </div>
                            <div className="col-sm-9">
                                <h2>Project Settings</h2>
                                <hr />
                                <ProjectContainer data={this.state.configuration} />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );

    }

});    


var ProjectContainer = React.createClass({

    getInitialState: function () {
        return {
            active: false

        };
    },

    componentWillReceiveProps: function (nextProps) {
        this.setState({
            active: nextProps.data.active
        });
    },

    render: function () {
        return (
            <div>
                <ProjectPanel data={this.props.data}></ProjectPanel>
            </div>
        );

    }
});


var ProjectPanel = React.createClass({

    getInitialState: function () {
        return {
            active: false
        };
    },

    componentWillReceiveProps: function (nextProps) {
        this.setState({
            active: nextProps.data.active
        });
    },

    handleSubmit: function () {
        Actions.updateConfigurationSettings({
            active: this.state.active
        });
    },

    switchSubmit: function(event) {
        event.stopPropagation();

        this.setState({
            active: event.currentTarget.checked
        });

        this.handleSubmit();

    },

    render: function() {

        var formElements = (
                <fieldset>
                    <SwitchButton
                        name="switch-1"
                        onChange={this.switchSubmit}
                        checked={this.props.active}
                    />
                </fieldset>
            );
        }

        return (
            <div className="project-holder">
                <div className="project-config">
                    <form onSubmit={this.handleSubmit}>
                        {formElements}
                    </form>
                </div>
            </div>
        );
    }
});

任何帮助将不胜感激!

Answer 1

为了直接回答您的问题，setState 接受一个回调，该回调可用于将代码推迟到渲染完成后。但是，您不需要在您的场景中使用它。

我在您的代码中看到的问题是您对于“事件”状态有多个事实来源。

我已更新您的代码来解决该问题:

var React = require('react/addons');
var Actions = require('../../Actions');
var ConfigurationStore = require('../../stores/Configuration');

var Controller = React.createClass({
    getInitialState: function () {

        ConfigurationStore.reset();

        Actions.getConfigurationSettings();

        return this.getStateFromStores();
    },

    getStateFromStores: function () {
        return {
            configuration: ConfigurationStore.getState()
        };
    },

    componentDidMount: function () {
        ConfigurationStore.addChangeListener(this.onStoreChange);
    },

    componentWillUnmount: function () {
        ConfigurationStore.removeChangeListener(this.onStoreChange);
    },

    onStoreChange: function () {
        this.setState(this.getStateFromStores());
    },


    render: function () {

        return (
            <section className="section-settings container">
                <h1 className="page-header">Projects</h1>
                <div className="row">
                    <div className="col-sm-12">
                        <div className="row">
                            <div className="col-sm-3">
                            </div>
                            <div className="col-sm-9">
                                <h2>Project Settings</h2>
                                <hr />
                                <ProjectContainer data={this.state.configuration} />
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        );

    }

});    

var ProjectContainer = React.createClass({
    render: function () {
        return (
            <div>
                <ProjectPanel data={this.props.data}></ProjectPanel>
            </div>
        );

    }
});


var ProjectPanel = React.createClass({
    handleSubmit: function () {
        // Do something interesting on submit.
    },

    switchSubmit: function(event) {
        event.stopPropagation();
        Actions.updateConfigurationSettings({
            active: event.target.checked
        });
    },

    render: function() {

        var formElements = (
                <fieldset>
                    <SwitchButton
                        name="switch-1"
                        onChange={this.switchSubmit}
                        checked={this.props.data.active}
                    />
                </fieldset>
            );
        }

        return (
            <div className="project-holder">
                <div className="project-config">
                    <form onSubmit={this.handleSubmit}>
                        {formElements}
                    </form>
                </div>
            </div>
        );
    }
});

无需在 ProjectContainer 或 ProjectPanel 中保存本地状态。 “事件”状态通过 props 流向这些组件。

我没有在您的 handleSubmit 按钮中放置任何代码，因为我觉得您在那里的内容最初没有意义。您只需要您想要在提交时运行的任何代码。