时间戳

首页 > 解决方案 > 回调函数不会自动重新渲染反应组件页面

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

问题描述

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() 函数时，它不会自动调用渲染函数。我不得不手动调用渲染函数，即使那样，它也没有做任何事情。任何人都可以帮助我理解为什么会发生这种情况以及我该如何解决它？

标签： javascriptreactjs

解决方案

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

推荐阅读