React Js 材质 UI 在设置时不更新值

Question

所以我在 material UI react js 中有这段代码，它没有正确更新值，所以我想，为了进一步解释，我有这段代码

import * as React from 'react';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';

export function Home() {


const [value, setValue] = React.useState('Pending');

  const handleChange = (event, newValue) => {
      setValue(newValue);
      console.log(value);
  };

  return (
    <div>
        <>
        <Tabs
          value={value}
          onChange={handleChange}
          textColor="secondary"
          indicatorColor="secondary"
          aria-label="secondary tabs example"
        >
          <Tab value="Pending" label="Pending" />
          <Tab value="Received" label="Received" />
          <Tab value="Prepared" label="Prepared" />
          <Tab value="Cancelled" label="Cancelled" />
        </Tabs>
        </>
    </div>
  );
}

如果我运行此代码并单击带有 label“待处理”的选项卡，则不会触发 console.log。 如果我再次单击带有 label“已接收”的标签，console.log 将显示“待定”而不是“已接收”。

这种情况一直发生，我认为当您设置值和控制台日志时，它应该显示您选择的最新值。

样本 output：

如您所见，我当前选择了“已接收”标签，但在显示屏上显示为“待定”

这是 js/Material UI 的反应方式还是我只是在这里遗漏了什么？

谢谢

Answer 1

正如 Dave Newton 在评论中所说，设置 state 是异步的，如 React 文档中所述： https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous

如果你想console.log这个值，你可以更新你的处理程序来记录新值

const handleChange = (event, newValue) => {
  setValue(newValue);
  console.log(newValue);
};

或者您可以在处理程序外部使用useEffect以在值更改时始终记录value

useEffect(() => {
    console.log(value);
}, [value]);