Question

在Material-UI制作的TransferList组件中设置一堆项目后，按“保存”时，我试图更新状态。问题是，当我单击“保存”时，它不会更新。如果我再次单击或与该组件进行任何交互，它将更新。

我在Code SandBox上创建了一个代码，因此您不必弄清楚我在说什么。该代码已经在工作，我在下面列出了包含9个项目的列表，它们确切地说明了我的问题所在。这是链接：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

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

1 个答案: