React中useEffect内setbolidata无法即时更新state的问题

问题代码 #

const [bolidata, setbolidata] = useState('');
 
useEffect(() => {
  if (location?.state) {
   
    setbolidata(location?.state?.data);
    console.log('This is' ,bolidata ) 
    console.log('boli data is manual donation ', location?.state?.data);
  }
}, []);

console.log("outside", bolidata);

const tabs = React.useMemo(
  () => [
    {
      label: ' Manual Cash Donation',
      component: (
        <CashDonation
          setshowalert={setshowalert}
          handleClose={handleClose}
          themeColor={donationColorTheme.cash}
          handleOpen4={handleOpen4}
          setopendashboard={setopendashboard}
          donationTypes={donationTypes}
          bolidatasss={bolidata}
        />
      ),
    }
  ]
);

问题原因 #

1. setState的异步特性：React的setbolidata是异步更新state的，调用后不会立刻修改bolidata的值，所以紧接着的console.log('This is', bolidata)拿到的还是组件初始渲染时的空字符串。
2. 闭包捕获的旧值：你的useEffect依赖数组是空的，它只会在组件挂载时执行一次，内部捕获的bolidata是初始state值，即使后续state更新，这个effect里的bolidata也不会同步变化。

解决方案 #

1. 监听state变化查看更新后的值

如果需要在bolidata更新后执行逻辑或打印日志，可以新增一个监听bolidata的useEffect：

useEffect(() => {
  console.log('Updated bolidata:', bolidata);
}, [bolidata]);

这样每次bolidata更新时，这个effect都会触发，能拿到最新的state值。

2. 修复useMemo的依赖问题

你的useMemo没有添加依赖数组，导致tabs里的CashDonation组件无法获取最新的bolidata，需要把所有用到的外部变量加入依赖数组：

const tabs = React.useMemo(
  () => [
    {
      label: ' Manual Cash Donation',
      component: (
        <CashDonation
          setshowalert={setshowalert}
          handleClose={handleClose}
          themeColor={donationColorTheme.cash}
          handleOpen4={handleOpen4}
          setopendashboard={setopendashboard}
          donationTypes={donationTypes}
          bolidatasss={bolidata}
        />
      ),
    }
  ],
  [bolidata, setshowalert, handleClose, donationColorTheme.cash, handleOpen4, setopendashboard, donationTypes]
);

3. 直接验证数据源

如果只是想确认要更新的值是否正确，直接打印location?.state?.data就足够，因为你已经用它来更新state，只要这个值正确，后续组件重新渲染时bolidata就会变为对应的值。

内容的提问来源于stack exchange，提问作者Mayank Painkra