单击“保存”时状态未更新

Question

在 Material-UI 制作的 TransferList 组件中设置一堆项目后，当我按“保存”时，我试图更新状态。问题是，当我单击“保存”时，它不会更新。如果我再次单击或与组件进行任何交互，它就会更新。我在 Code SandBox 上创建了一个代码，所以你不必弄清楚我在说什么。代码已经在运行，我在下面列出了一个包含九个项目的列表，准确地解释了我的问题是什么。这是链接：https : //codesandbox.io/s/question-about-hook-state-f3jtl我怀疑 useEffect 可能是解决方案。当我点击“保存”以避免性能问题时，我无法找到如何触发它。你可能会问“为什么你要更新“正确”的状态，然后才努力更新“data.items”？为什么不更新“data.items”。好吧，Material-UI 代码很受约束，而且似乎在改变它可怕的。

Answer 1

您的代码运行良好，但如果您想在事件中打印正确的状态，请将其更改为：

 const handleClick = () => {

    setData(prevState => {

      let newState = { ...prevState, items: right };

      console.log("handleClick", newState);

      return newState;

    });

    //  console.log("handleClick", data);

    //  console.log("right", right);

  };

与类组件中的 setState 方法不同，useState 不会自动合并更新对象。您可以通过组合函数更新程序来复制此行为。

这里固定的例子：https : //codesandbox.io/s/question-about-hook-state-sb0jo