Question

我有一个组件，它通过传递一个prop来由父组件更新。在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不是您副本上下文中的组件。您需要将最外面的内容传递给_.each。

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

无法更新componentWillReceiveProps方法中的状态

1 个答案: