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

【问题标题】：State not updating when "Save" is clicked单击“保存”时状态未更新
【发布时间】：2020-02-09 21:13:48
【问题描述】：

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

我在 Code SandBox 上创建了一个代码，因此您不必弄清楚我在说什么。该代码已经在运行，我在下面列出了一个列表，其中包含九个项目，准确地解释了我的问题是什么。这是链接：https://codesandbox.io/s/question-about-hook-state-f3jtl

我怀疑 useEffect 可能是解决方案。当我单击“保存”以避免性能问题时，我无法找到如何触发它。你可能会问“为什么要更新”正确的“状态才能在之后更新“data.items”？为什么不更新“data.items”。嗯，Material-UI 代码非常绑定并且似乎在改变它好可怕。

【问题讨论】：

请不要使用“它”之类的词：明确说明什么是更新，什么不是更新。 TransferList 组件，作为一个 React 组件，在你选择事物时已经更新了它的状态（因为这是它正确渲染的唯一方法），所以当你说“它不更新”时，你可能是指其他一些组件，比如父级或顶级应用程序。在您的帖子中具体说明。此外，虽然指向 codepen/jsbin/etc 的链接很有用，但请记住问题应包含所有相关信息 in the post，因为外部链接可能会消失。
我再次分享了一个链接，准确地解释了我的问题是什么。在阅读了您的回答后，我再次查看了该链接，以确认它是可以理解的，我认为是的。
确实，我会考虑您的建议。不更新的是“数据”状态。
请对问题本身和not a link做相关代码
当你们抱怨这里没有代码时，其他人抱怨大问题。我不能让双方都满意。 Material-UI 的 TransferList 组件很大。无论如何，感谢您的建议。我会等待任何人的帮助。

标签： javascript reactjs material-ui jsx react-hooks

【解决方案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

【讨论】：

非常感谢！我将使用 newState 搜索您在 setData 中用作参数的“prevState”。它正在工作。再次感谢。
如果“保存”按钮是 json 发件人怎么办？看来我需要使用您的方法在 setData 方法中发送 json 数据，否则我将发送过时的数据。我说的对吗？
是的，阅读更多reactjs.org/docs/hooks-reference.html#usestate
阅读文章中的“注意”部分