React函数组件中更新State后仍获取旧值的问题求助

问题分析 #

你遇到的核心问题是React的useState更新是异步批量执行的：调用setFormData后，当前函数闭包里的formData还是更新前的旧值，所以直接在setFormData后面访问formData.checkedUsers拿到的是修改前的数据；而组件重渲染后，外部的console.log才能拿到最新状态。

解决方案 #

方案1：更新前提前计算目标值（最直接）

既然在更新状态时已经明确要修改的用户数据，完全可以在调用setFormData之前就计算出修改后的用户对象，直接传给isAccessToRecord，不用等状态更新：

const { formData, setFormData } = useSetFormData({
  userSearchRequest: "",
  checkedUsers: [],
});

const handlUpdateCheckedUser = (userData, isChecked) => {
  if (formData.checkedUsers && formData.checkedUsers.length > 0) {
    if (!isChecked) {
      // 先计算更新后的用户数组
      const updatedCheckedUsers = formData.checkedUsers.map((item) => {
        if (item.id === userData.id) {
          return {
            ...item,
            readOnlyAccess: false,
            readAndEditAccess: false,
          };
        }
        return item;
      });
      // 提取修改后的目标用户
      const updatedUserData = updatedCheckedUsers.find(item => item.id === userData.id);
      // 直接调用目标函数
      isAccessToRecord(updatedUserData);
      console.log(updatedUserData);
      // 最后更新状态
      setFormData({
        ...formData,
        checkedUsers: updatedCheckedUsers,
      });
    }
  }
};

方案2：用useEffect监听状态变化

如果必须等状态完全更新后再执行操作，可以通过useEffect监听formData的变化，确保拿到最新的状态值。需要额外记录当前操作的用户ID，避免每次状态变化都触发函数：

import { useState, useEffect } from 'react';

const { formData, setFormData } = useSetFormData({
  userSearchRequest: "",
  checkedUsers: [],
});
// 新增状态记录当前操作的用户ID
const [currentUpdatedUserId, setCurrentUpdatedUserId] = useState(null);

const handlUpdateCheckedUser = (userData, isChecked) => {
  if (formData.checkedUsers && formData.checkedUsers.length > 0) {
    if (!isChecked) {
      // 记录当前修改的用户ID
      setCurrentUpdatedUserId(userData.id);
      setFormData((prevFormData) => ({
        ...prevFormData, // 改用prevFormData展开，避免闭包旧值
        checkedUsers: prevFormData.checkedUsers.map((item) => {
          if (item.id === userData.id) {
            return {
              ...item,
              readOnlyAccess: false,
              readAndEditAccess: false,
            };
          }
          return item;
        }),
      }));
    }
  }
};

// 监听formData和currentUpdatedUserId的变化
useEffect(() => {
  if (currentUpdatedUserId && formData.checkedUsers) {
    const updatedUserData = formData.checkedUsers.find(item => item.id === currentUpdatedUserId);
    if (updatedUserData) {
      isAccessToRecord(updatedUserData);
      // 重置用户ID，避免重复触发
      setCurrentUpdatedUserId(null);
    }
  }
}, [formData, currentUpdatedUserId, isAccessToRecord]);

注意事项 #

• 你原来的setFormData回调里用了...formData，这可能导致其他字段拿到旧值，正确的做法是展开prevFormData（方案2里已修正），保证状态的所有字段都是最新的。
• 方案1更适合这种明确知道修改内容的场景，避免额外的状态监听，代码更简洁。

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