React项目中Async/Await失效，Redux状态在提交函数内显示旧值

问题原因 #

核心问题是闭包陷阱：handleSubmit函数创建时捕获了当前的employee变量（旧值），虽然await dispatch(addEmployeePersonal(personalData))等待了action内部的异步请求完成，但Redux状态更新后，组件需要重新渲染才能让useSelector拿到新值——而当前handleSubmit的执行上下文还是旧的闭包，所以打印的是旧状态。外部的console.log(employee)能正常显示更新后的值，是因为它在组件渲染阶段执行，每次状态更新都会重新执行。

解决方案 #

方案1：直接从action返回数据（推荐，无需等待组件重新渲染） #

修改Redux Action，让它在请求完成后返回后端返回的data，这样await dispatch后就能直接拿到最新数据，不用依赖Redux状态更新：

// 修改后的Redux Action
export const addEmployeePersonal = (info) => async(dispatch) => {
  try {
    dispatch({ type: NEW_EMPLOYEE_PERSONAL_REQUEST });

    const { data } = await coreAxios.post("/api/Employee/PersonalInfo", info);
    dispatch({ type: NEW_EMPLOYEE_PERSONAL_SUCCESS, payload: data });
    
    // 返回获取到的数据
    return data;
  } catch (error) {
    dispatch({ type: NEW_EMPLOYEE_PERSONAL_FAILED, payload: error.response });
    // 抛出错误，方便外部捕获
    throw error;
  }
};

// 修改后的handleSubmit
const handleSubmit = async(values) => {
  const personalData = new FormData();
  Object.keys(personalValue).forEach((key) => personalData.append(key, personalValue[key]));

  try {
    // 直接拿到更新后的employee数据
    const updatedEmployee = await dispatch(addEmployeePersonal(personalData));
    console.log(updatedEmployee); // 这里就是最新值，可以直接用于后续操作
  } catch (error) {
    // 处理错误
    console.error(error);
  }
};

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

如果必须依赖Redux的employee状态来执行后续操作，可以用useEffect监听employee的变化，当状态更新时触发逻辑：

import { useEffect } from 'react';

// 在组件内部
useEffect(() => {
  // 排除初始默认值（你的初始值是0）
  if (employee !== 0) {
    console.log(employee); // 这里是更新后的状态
    // 执行你的后续操作，比如提交其他数据、跳转页面等
  }
}, [employee]); // 依赖employee，状态变化时触发

const handleSubmit = async(values) => {
  const personalData = new FormData();
  Object.keys(personalValue).forEach((key) => personalData.append(key, personalValue[key]));

  await dispatch(addEmployeePersonal(personalData));
  // 后续操作放在useEffect里执行
};

方案3：重构为Redux Toolkit（长期优化） #

如果项目还在使用传统Redux写法，建议迁移到Redux Toolkit，它的createAsyncThunk会自动处理异步逻辑，并且可以通过unwrapResult直接获取返回值，避免闭包问题：

// 使用Redux Toolkit的示例
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const addEmployeePersonal = createAsyncThunk(
  'employee/addPersonal',
  async (info) => {
    const { data } = await coreAxios.post("/api/Employee/PersonalInfo", info);
    return data;
  }
);

const employeeSlice = createSlice({
  name: 'employee',
  initialState: { employee: 0, employeeLoading: false, employeeError: null },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(addEmployeePersonal.pending, (state) => {
        state.employeeLoading = true;
        state.employee = 0;
      })
      .addCase(addEmployeePersonal.fulfilled, (state, action) => {
        state.employeeLoading = false;
        state.employee = action.payload;
      })
      .addCase(addEmployeePersonal.rejected, (state, action) => {
        state.employeeLoading = false;
        state.employeeError = action.error;
      });
  }
});

export default employeeSlice.reducer;

// 在组件中使用
import { unwrapResult } from '@reduxjs/toolkit';

const handleSubmit = async(values) => {
  const personalData = new FormData();
  Object.keys(personalValue).forEach((key) => personalData.append(key, personalValue[key]));

  try {
    const actionResult = await dispatch(addEmployeePersonal(personalData));
    const updatedEmployee = unwrapResult(actionResult);
    console.log(updatedEmployee); // 最新值
  } catch (error) {
    console.error(error);
  }
};

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