Redux Toolkit异步Thunk的catch中useState状态不更新问题

你的问题核心是Redux Toolkit异步Thunk执行失败后，catch块内的setError无法更新组件状态，可能有以下几个原因及对应解决方案：

1. 错误值的获取方式错误 #

当使用rejectWithValue抛出错误时，unwrap()会将错误值直接抛出，但需先确认错误结构。先在catch中打印错误，确认是否拿到预期的ERR_USER_LOGIN字符串：

.catch((err) => {
  console.log("捕获到的错误:", err); // 先确认错误内容
  setError(err);
});

如果打印发现err不是直接的字符串，而是包含payload的对象，则需取err.payload：

.catch((err) => {
  setError(err.payload || "登录失败");
});

2. 闭包陷阱导致状态更新失效 #

如果handleLogin函数依赖userInfo等外部变量，未用useCallback包裹会导致闭包捕获旧值，影响状态更新。用useCallback包裹函数并添加正确依赖项：

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

// ...

const userInfo = useSelector(state => state.auth.userInfo);
const dispatch = useDispatch();
const [error, setError] = useState("");

const handleLogin = useCallback(() => {
  dispatch(userLogin({ email, password }))
    .unwrap()
    .then(() => {
      if (userInfo) {
        navigate("/profile");
      }
    })
    .catch((err) => {
      setError(err);
    });
}, [dispatch, email, password, userInfo, navigate]); // 添加所有依赖项

3. 改用Redux存储错误状态（更推荐方案） #

既然已经使用Redux Toolkit，可将错误状态存在Redux中，避免组件内部useState的闭包问题：

步骤1：在Auth Slice中处理错误状态 #

import { createSlice } from '@reduxjs/toolkit';
import { userLogin } from './authThunks';

const authSlice = createSlice({
  name: 'auth',
  initialState: {
    userInfo: null,
    loading: false,
    error: ''
  },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(userLogin.pending, (state) => {
        state.loading = true;
        state.error = ''; // 发起请求时清空错误
      })
      .addCase(userLogin.fulfilled, (state, action) => {
        state.loading = false;
        state.userInfo = action.payload;
        state.error = '';
      })
      .addCase(userLogin.rejected, (state, action) => {
        state.loading = false;
        state.error = action.payload || '登录失败'; // 存储错误信息
      });
  }
});

export default authSlice.reducer;

步骤2：组件中直接从Redux获取错误 #

const { error, userInfo, loading } = useSelector(state => state.auth);

const handleLogin = () => {
  dispatch(userLogin({ email, password }))
    .unwrap()
    .then(() => {
      navigate("/profile");
    });
};

这样无需组件内部的useState存储错误，直接使用Redux状态即可，彻底避免闭包问题。

4. 检查异步请求是否真的抛出错误 #

确认userLoginRequest在请求失败时会抛出错误，比如用Fetch的话，需手动判断响应状态并抛出错误：

const userLoginRequest = async (email, password) => {
  const response = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ email, password }),
    headers: { 'Content-Type': 'application/json' }
  });
  if (!response.ok) {
    throw new Error('登录失败'); // 必须抛出错误，Thunk的catch才会执行
  }
  return response.json();
};

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