首次点击按钮时Redux中Error状态为undefined的问题求助

你遇到的核心问题是Redux异步流程的时序问题：

• 调用createsponsors(data)后立刻执行console.log，此时saga还在处理异步API请求，Redux store里的error状态还没更新，打印的是组件当前props中保存的旧error值（初始为null）。
• 组件能正常渲染错误信息，是因为当saga捕获到API错误、dispatchCREATE_SPONSORS_ERROR action后，store状态更新，组件会触发重新渲染，此时props里的error已经是最新的错误数据。
• 第二次点击时，store里已经保存了第一次请求的错误状态，所以打印的是旧的错误信息，并非实时的当前请求错误。

推荐使用React的useEffect监听error状态的变化，在状态更新后再执行打印逻辑，这是最符合React+Redux数据流的方案：

1. 导入useEffect（组件未导入时添加）：

import { useEffect } from 'react';

2. 添加监听逻辑：

const { createsponsors, error } = props;

// 监听error状态变化，更新时打印最新错误信息
useEffect(() => {
  if (error) {
    console.log("Error", error.message);
  }
}, [error]); // 仅当error状态变化时执行回调

const handleSubmit = () => {
  createsponsors(data);
  // 移除此处的console.log，避免打印旧状态值
};

其他可选方案（不推荐） #

如果一定要在handleSubmit中关联打印逻辑，可以通过改造saga或action支持回调，但会增加代码耦合度：

• 修改Action，允许传入错误回调：

  // Action代码修改
  export const createsponsors = (data, onError) => {
    return {
      type: ACTION.CREATE_SPONSORS,
      data: data,
      onError,
    };
  };
  

• 修改Saga，在错误处理完成后调用回调：

  // Saga代码修改
  export function* createNewSponsor(action) {
    yield put({ type: ACTION.CREATE_SPONSORS_REQUEST });
    try {
      const { data } = yield apiCreateSponsor(action.data);
      yield put({
        type: ACTION.CREATE_SPONSORS_RESPONSE,
        data: data,
      });
      yield call(forward, "/sponsors");
    } catch (e) {
      const errorData = e.response.data;
      yield put({ type: ACTION.CREATE_SPONSORS_ERROR, error: errorData });
      // 执行传入的错误回调
      if (action.onError) {
        action.onError(errorData);
      }
    }
  }
  

• 组件中调用时传入回调：

  const handleSubmit = () => {
    createsponsors(data, (error) => {
      console.log("Error", error.message);
    });
  };
  

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