Question

我收到错误

在现有状态转换期间无法更新（例如在var或其他组件的构造函数中）。

这里我有render状态，我存储了条目列表：

TodoItems

这里我有var TodoItems = React.createClass({ getInitialState: function() { return { entries: this.props.entries }; } ... });函数，我遍历列表，然后使用removeItem更新prop：

state

这是我的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 }); }函数，我还有render函数，负责在createTasks中创建项目。我想我的问题可能就在这里？

TodoList

以下是实际的render: function() { var todoEntries = this.props.entries; var _removeItem = this.removeItem; function createTasks(item) { return ( <li key={item.key}> {item.text} <button onClick = {_removeItem(item.key)} className= "remove"> Remove </button> </li> ); } var listItems = todoEntries.map(createTasks); return ( <ul className="theList"> {listItems} </ul> ); }组件，其中我使用唯一键来识别项目。

TodoList

Answer 1

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

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

另外，在构造函数中绑定this.removeItem = this.removeItem.bind（this）。

Answer 2

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

这样的事情：

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

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

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

然后你应该把它传下来：

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

然后在你的TodoItem中你应该调用该函数：

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

此外，如果需要，您可以尝试从TodoItem组件中的render函数外部定义createTask函数。

我的实现可能无法正常工作，但我的建议是像这样处理它。请记住，React是自上而下的数据流。

希望它能帮助人。

我的代码崩溃了控制台，错误与React状态更新

2 个答案: