回调函数不会自动重新呈现react组件页面

Question

handleAddItem(s) {
this.state.items[s.listName].push({name: s.newItem});
this.render();
}

render() {
console.log("re-rendering");
return (
<div className="App">
<AddList addList={this.handleAddList.bind(this)} />
<div id="listsDiv" className="List">
<Lists lists={this.state.lists} items={this.state.items} addItem={this.handleAddItem.bind(this)} />
</div>
</div>
);
}

我有一个名为handleAddItem((的回调函数，由于某种原因，当在这个react组件中调用handleAddItem[(]函数时，它不会自动调用呈现函数。我不得不手动调用render函数，即使这样，它也没有做任何事情。有人能帮我理解为什么会发生这种情况，以及我如何解决它吗？

Answer 1

您正试图直接修改状态数据，但无法。

你必须调用函数setState来改变它的任何数据的状态

如何？

this.setState({theData: newState})

尝试直接修改它将产生您当前正在经历的行为。

Answer 2

在react中，您不能直接编辑状态变量。您必须创建一个新的临时变量，对其进行编辑，然后调用setState()，才能实现所需内容并触发重新渲染。

所以你的handleAddItem变成了：

handleAddItem(s) {
// Create a copy of items
const newItems = { ...this.state.items }; // Assuming that items is an object
// Edit the copy
newItems[s.listName].push({ name: s.newItem });
// Call setState
this.setState({ items: newItems });
}

Answer 3

您不应该直接更改状态。您应该调用setState:

https://reactjs.org/docs/state-and-lifecycle.html#do-不直接修改状态

handleAddItem(s) {
this.setState(({ items }) => {
const updatedItems = {...items};
updatedItems[s.listName] = [...updatedItems[s.listName], { name: s.newItem }];
return {
items: updatedItems
};
});
}