javascript - 添加新项目 CRUD 反应

Question

我正在练习一点反应，我想做一个 CRUD，我遇到的问题是添加新元素时。我获得了新数据以到达父级中名为 createNewItem 的函数（我有一个 console.log），但我看不到列表中反映的新项目并添加到第二次单击“保存” "按钮，不是第一个。我失败了什么？谢谢你的帮助。我留下一个带有代码的沙箱。

https://codesandbox.io/embed/wizardly-archimedes-x8jzn

标签： javascriptreactjs

Answer 1

这里的问题setState是异步的，因此console.log不会立即显示新状态。为此，您需要使用回调setState：

 createNewItem = event => {
    const newList = [event, ...this.state.restoOriginales];
    this.setState({ restoOriginales: newList }, () => { // Use callback here
      console.log("NUEVO ITEM", this.state.restoOriginales);
    });
  };

此外，您还需要在保存项目后重定向回主页或以其他方式删除表单。