React中Dispatch修改对象后调用API传旧值的问题求助

你当前代码里的empresa是修改前的对象引用，调用dispatch(empresaPersonaSetNull(null))只会更新Redux状态里的empresa，但本地变量empresa并不会自动同步更新，所以传给editEmpresaById的还是旧数据。

方法一：直接构造修改后的对象传入接口（最直接高效） #

不需要先dispatch，直接创建包含persona: null的新对象传给接口，再同步更新Redux状态：

if (personaModified) {
  editEmpresaById({ id: +id, data: empresa });
} else {
  // 基于原对象创建新对象，手动将persona设为null
  const updatedEmpresa = { ...empresa, persona: null };
  // 直接发送修改后的对象
  editEmpresaById({ id: +id, data: updatedEmpresa });
  // 同步更新Redux状态
  dispatch(empresaPersonaSetNull(null));
}

方法二：从Redux获取最新状态后调用接口 #

如果必须先更新Redux状态再调用接口，可以通过Redux的getState方法获取最新状态，或者在组件中监听状态变化：

方式1：用createAsyncThunk封装异步逻辑 #

// 在Redux Slice中创建异步Thunk
import { createAsyncThunk } from '@reduxjs/toolkit';

export const editEmpresaWithNullPersona = createAsyncThunk(
  'empresa/editWithNullPersona',
  async (id: number, { getState, dispatch }) => {
    dispatch(loadingSet(true));
    // 获取Redux中最新的empresa状态
    const { empresa } = getState() as { empresa: EmpresaState };
    const updatedEmpresa = { ...empresa, persona: null };
    // 发送请求
    const response = await empresaApi.put<EmpresaDTO>(`${BASE_ENDPOINT}/edit/${id}`, updatedEmpresa);
    dispatch(loadingSet(false));
    dispatch(empresaSet(response.data));
    return response.data;
  }
);

// 组件中调用
if (personaModified) {
  editEmpresaById({ id: +id, data: empresa });
} else {
  dispatch(editEmpresaWithNullPersona(+id));
}

方式2：组件中用useSelector+useEffect监听状态更新 #

import { useSelector, useDispatch } from 'react-redux';
import { useState, useEffect } from 'react';

const YourComponent = () => {
  const empresa = useSelector((state) => state.empresa.empresa);
  const dispatch = useDispatch();
  const [shouldEditWithNull, setShouldEditWithNull] = useState(false);

  // 监听状态变化，触发接口调用
  useEffect(() => {
    if (shouldEditWithNull) {
      editEmpresaById({ id: +id, data: empresa });
      setShouldEditWithNull(false);
    }
  }, [shouldEditWithNull, empresa, id]);

  // 原逻辑修改为：
  const handleEdit = () => {
    if (personaModified) {
      editEmpresaById({ id: +id, data: empresa });
    } else {
      dispatch(empresaPersonaSetNull(null));
      setShouldEditWithNull(true);
    }
  };

  return <button onClick={handleEdit}>保存</button>;
};

方法三：优化Redux Slice的状态更新（辅助手段） #

虽然Redux Toolkit的Immer允许直接修改状态，但可以通过返回新对象确保状态引用更新，配合方法二使用：

empresaPersonaSetNull: (state: EmpresaState, action: PayloadAction<null>) => {
  // 替换为新对象，让状态引用发生变化
  state.empresa = { ...state.empresa, persona: action.payload };
},

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