Javascript 我的代码使控制台崩溃，反应状态更新出错

我犯了个错误

无法在现有状态转换期间更新（例如在

render

或其他组件的构造函数中）

这里有我的

TodoItems

和state，其中我存储了条目列表：

var TodoItems = React.createClass({
    getInitialState: function() {
        return {
            entries: this.props.entries
        };
    }
    ...
});

这里有我的

removietem

函数，我在其中迭代列表，然后使用

prop

更新

状态

：

removeItem: function(key){
    var itemArray = this.state.entries;
    for (var i = 0; i < itemArray.length; i++) {
        if (itemArray[i.key] === key) {
            itemArray.splice(i, 1);
            break;
        }
    }
    this.setState({
        entries: itemArray
    });
}

这是实际的

TodoList

组件，其中我使用唯一键分配项目

var TodoList = React.createClass({
    getInitialState: function() {
        return {
            items: []
        };
    },

    addItem: function(e) {
        var itemArray = this.state.items;

        itemArray.push({
            text: this._inputElement.value,
            key: Date.now()
        });

        this.setState({
            items: itemArray
        });

        this._inputElement.value = "";

        e.preventDefault();
    },

    render: function() {
        return (
            <div className="todoListMain">
                <div className="header">
                    <form onSubmit = {this.addItem}>
                        <input ref={(a) => this._inputElement = a}
                               placeholder="enter task">
                        </input>
                        <button type="submit">add</button>
                    </form>
                </div>
                <TodoItems entries={this.state.items}/>
            </div>
        );
    }
});

ReactDOM.render(
    <TodoList/>,
    document.getElementById('root')
);

var TodoList=React.createClass({
getInitialState:函数（）{
返回{
项目：[]
};
},
附加项：函数（e）{
var itemArray=this.state.items；
itemArray.push({
text:this.\u inputElement.value，
关键字：Date.now（）
});
这是我的国家({
项目：itemArray
});
此项。_inputElement.value=“”；
e、 预防默认值（）；
},
render:function（）{
返回(
这个.\u inputElement=a}
占位符=“输入任务”>
添加
);
}
});
ReactDOM.render(
,
document.getElementById（'root'））
);

我认为您的onclick事件是在编译时执行的。您应该传递一个函数，而不是如下所示的结果：

<button onClick = {this.removeItem (or _removeItem} data-key={key}

---

我认为您的错误在于您将项目作为道具传递，然后尝试更新子组件（这是TodoItem组件）中的元素，而您不应该这样做。
完成任务的方法是在父组件（TodoList）中创建一个用于删除项的函数。然后，您可以将该函数作为道具传递，并从子组件内部发射它

大概是这样的：

首先，您可以尝试使用ES6解决方案从条目中删除元素。可以使用filter方法，该方法将返回一个新数组，其中包含满足条件的数组的所有元素然后需要将此新数组分配给state entries对象。

在TodoList组件中，您应该创建一个新函数：

removeItem(key){
    this.state.items.filter( (item) => item.key != key )
}

<button onClick={this.props.deleteItem(key)}

那么你应该把它传下去：

<TodoItem deleteItem={(key) => this.removeItem(key)} entries={this.state.items}/>

this.removietem（key）}entries={this.state.items}/>

然后在TodoItem中调用该函数：

removeItem(key){
    this.state.items.filter( (item) => item.key != key )
}

<button onClick={this.props.deleteItem(key)}