Question

我正在编写我的第一个reactjs + flux应用程序，并且我已经设法使基本代码正常工作。但是，有一个列表，根据单击的列表项填充另一个列表。这工作正常，直到我在商店中硬编码我的列表数据。但是，当我开始从服务器获取列表项的数据时，第二个列表不会在单击时填充 - 它需要两次单击才能执行此操作。我不认为从服务器获取数据是一个问题，因为默认数据是正确填充的。调试之后，我发现存储也正确地返回数据，但是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>
            )
    }
});

P.S。此代码已经过修改，可以在此处发布。请忽略任何语法错误 - 它有效！

Answer 1

可能会因为DataStore触发器2的更新发生变化而崩溃：

完整组件由父组件重新呈现，触发componentWillReceiveProps +触发渲染周期。
您还可以监听DataStore中的更改，因此DataStore中的更新也会触发_onChange事件，该事件也会尝试更新状态

PS：代码有拼写错误：

this.setState(getInitialData);

应为：

this.setState(getInitialData());

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

ReactJS + Flux setState无法单击

1 个答案: