材质UI多重选择的状态无法正确更新

Question

material-ui中的

多项选择状态无法正常工作。

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

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

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

{{3}}

Answer 1

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

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

为什么当前不起作用？： 由于您是在handleChange函数中记录状态，因此您可能无法看到刚刚更改的当前状态，直到用新状态重新渲染组件为止。

Answer 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]);

您可以参考此CodeSandbox演示