material UI multi select 的状态未正确更新

Question

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

例如：当我第一次select菜单的每一项时，状态没有改变，是这样的：[]

然后通过 select 将第二项状态更改为：['item'].

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

Answer 1

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

您可以通过直接在组件 return 语句之前（不在 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演示

state of material UI multi select doesn't update properly