React Redux首次渲染时useEffect异步请求致页面跳转异常问题

首次渲染触发跳转是因为组件初始化时carArray处于初始空状态，而你没区分「正在加载数据」和「加载完成后确实无数据」两种情况——接口请求是异步的，首次渲染时请求还没返回结果，就直接判定carArray为空跳转到首页了，等请求完成后组件二次渲染才有数据，但这时候已经跳转走了。

给状态增加加载中标记，只有当请求完成且确实没有数据时才跳转，加载过程中保持页面不跳转，可显示加载提示。

1. 修改Slice，添加加载状态和错误处理 #

在carStore slice里，补充isLoading和error状态，同时处理异步请求的pending和rejected阶段：

// slice代码修改后
const initialState = {
  carArray: [], // 初始化为空数组，避免undefined判断问题
  isLoading: false,
  error: null
};

builder.addCase(getCar.pending, (state) => {
  state.isLoading = true;
  state.error = null;
});
builder.addCase(getCar.fulfilled, (state, action) => {
  state.isLoading = false;
  state.carArray = action.payload || []; // 确保返回值为空时也有默认空数组
});
builder.addCase(getCar.rejected, (state, action) => {
  state.isLoading = false;
  state.error = action.error.message;
  state.carArray = []; // 请求失败时设为空数组
});

2. 修改组件逻辑，区分加载状态和空数据状态 #

在组件中引入isLoading状态，调整渲染逻辑：

const { car } = useParams();
const { carArray, isLoading } = useSelector(state => state.carStore);

useEffect(() => {
  dispatch(getCar(JSON.stringify(car)));
}, [car, dispatch]); // 把dispatch加入依赖数组（React Redux v7+可自动识别，加了更稳妥）

// 加载中时显示加载提示，不跳转
if (isLoading) {
  return <div>加载中...</div>;
}

// 加载完成后，判断carArray是否为空，为空才跳转
return (
  <div>
    {carArray.length === 0 ? <Navigate to="/" /> : carArray.map(item => (
      // 你的渲染逻辑，比如<div key={item.id}>{item.name}</div>
    ))}
  </div>
);

3. 优化API请求代码 #

简化axios请求写法，避免await和.then/.catch混合使用：

export const getCar = createAsyncThunk(
  'get/car',
  async (str) => {
    try {
      const response = await axios.post("", str);
      return response.data;
    } catch (err) {
      console.log(err);
      throw err; // 抛出错误让rejected捕获
    }
  }
);

这样修改后，首次渲染时会显示加载状态，等请求完成后再判断是否有数据，不会再出现首次误跳转的问题。

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