材质 UI 多选状态未正确更新答案

【问题标题】：state of material UI multi select doesn't update properly材质 UI 多选状态未正确更新
【发布时间】：2020-01-18 16:37:02
【问题描述】：

material-ui 中的多选状态无法正常工作。

例如：当我第一次选择菜单的每个项目时，状态不会改变并且是这样的：[]

然后通过选择第二个项目状态更改为：['item']。

这些是我在codesandbox上的代码，请看一下：

【问题讨论】：

【解决方案1】：

从我在您的代码中看到的，您不是在谈论 Material UI 状态，而是您的组件状态。对于您的状态，我可以向您保证一切正常。

您可以在组件返回语句之前（不在您的 handleChange 函数中）通过控制台日志记录 (console.log(personName);) 检查组件状态。您将看到 - 随着您选择的每次更改 - 您的组件将重新呈现当前状态。这也是您在实际渲染中看到的。

为什么目前不起作用？：由于您在 handleChange 函数中记录状态，因此在您的组件使用新状态重新呈现之前，您可能看不到刚刚更改的当前状态。

【讨论】：

【解决方案2】：

您的状态会正确更新。看看这个函数：

  function handleChange(event) {
    setPersonName(event.target.value);
    console.log(personName);
  }

setPersonName 是一个异步函数。所以当你打印 personName 时，它可能还没有更新，这就是它打印最后一个 personName 的原因。
如果你想根据值做一些事情，要么使用 event.target.value，要么使用 useEffect：

  useEffect(() => {
    console.log(personName);
    //do something here with personName
  }, [personName]);

可以参考这个CodeSandboxdemo

【讨论】：