回调函数不会自动重新渲染反应组件页面

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() 的回调函数，由于某种原因，当在这个反应组件中调用 handleAddItem() 函数时，它不会自动调用渲染函数。我不得不手动调用渲染函数，即使那样，它也没有做任何事情。任何人都可以帮助我理解为什么会发生这种情况以及我该如何解决它？

Answer 1

您正在尝试直接修改状态数据，但您不能。

您必须调用函数 setState 来改变（更改）它的任何数据的状态。

如何？

this.setState({theData: newState})

尝试直接对其进行修改将具有您当前遇到的行为。

Answer 2

在反应中，您不能直接编辑您的状态变量。您必须创建一个新的临时变量，对其进行编辑然后调用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-not-modify-state-directly

handleAddItem(s) {

  this.setState(({ items }) => {

    const updatedItems = {...items};

    updatedItems[s.listName] = [...updatedItems[s.listName], { name: s.newItem }];

    return {

      items: updatedItems

    };

  });

}