为什么触发Redux action后React无法正常更新组件本地state？

问题原因和排查方案 #

首先你代码里打印的values.rescheduleDate是false属于正常现象：React的状态更新是批量异步执行的，你在调用setValues之前打印的永远是本次渲染周期的旧状态值，并不代表状态没有更新成功。

如果确认状态确实没有更新到预期值，按以下方向排查：

• 把打印逻辑移到组件函数的顶层（点击事件外），每次组件重渲染都会打印最新的状态值，确认点击后是否有输出rescheduleDate: true的日志：

  // 组件函数第一行加
  console.log('最新rescheduleDate', values.rescheduleDate)
  

• 检查你调用的两个Redux Action是否是异步操作：如果是thunk/saga类的异步请求Action，你当前的同步写法会在请求还没完成时就执行setValues，如果后续Redux状态更新导致组件重渲染，需要确认你定义values的useState没有被重复初始化，也没有其他useEffect逻辑在重渲染时把rescheduleDate改回false。
• 如果你需要等Redux异步操作全部完成后再修改本地状态，有两种修正方案：
  1. 如果你的异步Action支持返回Promise（Redux Thunk默认支持），将点击事件改为异步函数等待Action执行完成再更新状态：

  <TableCell
      onClick={async () => {
        if (dropDownLocation === "allLocations") {
          overlayDisplay("open");
        } else {
          // 并行执行两个异步Action，等全部完成后再更新本地状态
          await Promise.all([
            getReservationsByDate(row.reservation_date),
            getStaffMember(row.staff_name)
          ])
          setValues((prevState) => {
            return {
              ...prevState,
              rescheduleDate: true,
            };
          });
        }
      }}
    >CLICK</TableCell>
  

  2. 监听Redux中对应请求的完成状态，通过useEffect触发本地状态更新：

  // 假设你从Redux中取到了两个请求的完成状态
  const { reservationsLoaded, staffLoaded } = useSelector(state => state.yourModule)
  useEffect(() => {
    if(reservationsLoaded && staffLoaded) {
      setValues(prev => ({...prev, rescheduleDate: true}))
    }
  }, [reservationsLoaded, staffLoaded, setValues])
  

• 排查是否有直接修改values对象的突变操作：比如直接写values.rescheduleDate = false而不是调用setValues，这种写法会导致React无法检测到状态变化，出现更新异常。

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