javascript - 无法更新 componentWillReceiveProps 方法中的状态

Question

我有一个组件，它由父组件通过传递 prop 来更新。在 componentWillReceiveProps 中，我想更改一个状态(availableData)，其中包含来自 prop(newData)的新添加的数据。

该 prop 名为 newData，更新的状态名为 availableData。

当我尝试访问连接新(唯一)数据的 availableData 时，出现以下错误:

 Uncaught TypeError: Cannot read property 'availableData' of undefinedInline JSX script:79  

代码片段:

var DataList = React.createClass({
    getInitialState: function() {
        return {availableData: []};
    },
    componentWillReceiveProps: function(nextProps) {
        var availableData = this.state.availableData;
        var newData = nextProps.newData;
        if (_.isEmpty(availableData)) {
            this.setState({availableData: nextProps.newData});
        } else {
            _.each(newData, function(_newData) {
                var isDuplicate = false;
                _.each(availableData, function(_availableData) {
                    if(isSameData(_availableData, _newData)) {
                        isDuplicate = true;
                    }
                }); 
                if (!isDuplicate) {
                    console.log(_newData);
                    this.setState({ availableData: this.state.availableData.concat([_newData]) });
                }
            });

        }
    },
    handleClick: function (_data) {
    },
    render: function() {
        var dataItems = this.state.availableData.map(function (_data, index) {
            return <DataItem data={_data} key={index} onClick={this.handleClick.bind(this, _data)} />;
        }, this);        
        return (
        <div className="col-lg-3">
            <ul className="list-group">
                <li className="list-group-item active">Data</li>
                {dataItems}
            </ul>
        </div>
        );
    } 
}); 

失败:

this.setState({ availableData: this.state.availableData.concat([_newData]) });

更新:

通过在循环外设置var _this = this;并引用_this来解决，不幸的是所有setStates都没有被初始化。

Answer 1

this 不是副本上下文中的组件。您需要将最外层的 this 传递给您的 _.each。

_.each(list, iteratee, [context])