无法在 componentWillReceiveProps 方法中更新状态

Question

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

道具名为 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])

无法在 componentWillReceiveProps 方法中更新状态

Unable to update state within componentWillReceiveProps method

javascript

reactjs