Javascript 在调用Flux Store操作时，setState不会更新状态

我有两个组件。项目容器和项目设置面板（稍后将有更多项目设置面板）

我在面板内有一个开关，调用“switchSubmit”函数更新状态，然后调用“handleSubmit”函数，该函数包含一个动作，该动作根据开关按钮的值更新流量存储。我正在设置状态，但它似乎总是在调用我的动作时选择的上一个值

我读过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>
        );
    }
});

var React=require（'React/addons'）；
var Actions=require（'../../Actions'）；
var ConfigurationStore=require（'../../stores/Configuration'）；
var Controller=React.createClass({
getInitialState:函数（）{
ConfigurationStore.reset（）；
Actions.getConfigurationSettings（）；
返回此.getStateFromStores（）；
},
getStateFromStores:函数（）{
返回{
配置：ConfigurationStore.getState（）
};
},
componentDidMount:函数（）{
ConfigurationStore.addChangeListener（this.onStoreChange）；
},
componentWillUnmount:函数（）{
ConfigurationStore.removeChangeListener（this.onStoreChange）；
},
onStoreChange:函数（）{
this.setState（this.getStateFromStores（））；
},
渲染：函数（）{
返回(
项目
项目设置

);
}
});    
var ProjectContainer=React.createClass({
getInitialState:函数（）{
返回{
活动：错误
};
},
组件将接收道具：函数（下一步）{
这是我的国家({
活动：nextrops.data.active
});
},
渲染：函数（）{
返回(
);
}
});
var ProjectPanel=React.createClass({
getInitialState:函数（）{
返回{
活动：错误
};
},
组件将接收道具：函数（下一步）{
这是我的国家({
活动：nextrops.data.active
});
},
handleSubmit:函数（）{
Actions.updateConfiguration设置({
活动：this.state.active
});
},
switchSubmit：函数（事件）{
event.stopPropagation（）；
这是我的国家({
活动：event.currentTarget.checked
});
this.handleSubmit（）；
},
render:function（）{
var formElements=(
);
}
返回(
{formElements}
);
}
});

---

任何帮助都将不胜感激

要直接回答您的问题，

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>
        );
    }
});

var React=require（'React/addons'）；
var Actions=require（'../../Actions'）；
var ConfigurationStore=require（'../../stores/Configuration'）；
var Controller=React.createClass({
getInitialState:函数（）{
ConfigurationStore.reset（）；
Actions.getConfigurationSettings（）；
返回此.getStateFromStores（）；
},
getStateFromStores:函数（）{
返回{
配置：ConfigurationStore.getState（）
};
},
componentDidMount:函数（）{
ConfigurationStore.addChangeListener（this.onStoreChange）；
},
componentWillUnmount:函数（）{
ConfigurationStore.removeChangeListener（this.onStoreChange）；
},
onStoreChange:函数（）{
this.setState（this.getStateFromStores（））；
},
渲染：函数（）{
返回(
项目
项目设置

);
}
});    
var ProjectContainer=React.createClass({
渲染：函数（）{
返回(
);
}
});
var ProjectPanel=React.createClass({
handleSubmit:函数（）{
//在提交时做一些有趣的事情。
},
switchSubmit：函数（事件）{
event.stopPropagation（）；
Actions.updateConfiguration设置({
活动：event.target.checked
});
},
render:function（）{
var formElements=(
);
}
返回(
{formElements}
);
}
});

无需在

ProjectContainer

或

ProjectPanel

中保存本地状态。a

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

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



},