ReactJS + Flux setState 在单击时不起作用答案

【问题标题】：ReactJS + Flux setState not working on single clickReactJS + Flux setState 在单击时不起作用
【发布时间】：2015-08-02 16:29:11
【问题描述】：

我正在编写我的第一个 reactjs + Flux 应用程序，并且我已经设法让基本代码正常工作。但是，有一个列表，它根据单击的列表项填充另一个列表。在我将列表数据硬编码在商店中之前，这一切正常。但是当我开始从服务器获取列表项的数据时，第二个列表不会通过单击填充 - 它需要两次单击才能完成。我认为从服务器获取数据不是问题，因为默认数据已正确填充。调试后发现store也是正确返回数据，但是setState()没有设置数据。我究竟做错了什么？这是我的代码：

function getInitialData(){
    return{
        items:DataStore.getFirstItemData()
    }
}

var ListItems = React.createClass({
    getInitialState:function(){
        return getInitialData();
    },
    _onChange:function(){
        this.setState(getInitialData);
    },
    componentDidMount:function(){
        DataStore.addChangeListener(this._onChange);
    },
    componentWillReceiveProps:function(){

        this.setState({items:this.props.itemsData});    

    },
    handleClick:function(e)
    {
        var data = DataStore.getSubItemsFor(e);
        this.setState({items:data});

    },
    render:function(){
        return(

            <div>
            <div className="col-md-3 dc-left" id="main-list">
                <div className="dc-main-list-parent">
                    {this.props.listData.map(function(list_items){
                        return(
                                <div key={list_items.id}  onClick = {this.handleClick.bind(this,list_items.id)}>
                                </div>
                            );
                    },this)}        
                </div>
            </div>
            <div className="col-md-9 dc-center" id="sub-list">
                <SubList sublistData = {this.state.items} />
            </div>

            </div>
            )
    }
});

附：此代码已稍作修改，以便在此处发布。请忽略任何语法错误 - 它有效！

【问题讨论】：

你能提供一个 JSBin/JSFiddle 来重现这个问题吗？
@Anders 我希望我能！但这是 6 个组件中的一个，服务器位于 localhost。
@user4773422 您不应该在将操作发送到商店后直接设置数据，商店应该负责将数据级联到您的组件。
@limelights 由于我的项目只是一个吸气剂，我想我不需要任何操作。无论如何，我尝试调度一个动作，但得到一个“无法在调度中间调度”错误。上一次调度完成后如何设置 items 变量？

标签： reactjs reactjs-flux

【解决方案1】：

可能因为 DataStore 的更新触发了 2 项更改而导致故障：

整个组件由父组件重新渲染，父组件触发 componentWillReceiveProps + 触发渲染周期。
您还有一个监听器来监听 DataStore 中的变化，因此 DataStore 中的更新也会触发 _onChange 事件，该事件也会尝试更新状态

PS：代码有错别字：

this.setState(getInitialData);

应改为：

this.setState(getInitialData());

我建议您删除更改侦听器部分，看看是否有帮助..

【讨论】：