fetch请求返回正常但数据无法注入Redux State问题求助

问题根源 #

你当前的问题出在没有对fetch返回的Response对象做JSON解析，直接把原始Response对象dispatch到reducer，自然没法拿到实际的用户数据。

第一步：修改action代码，解析响应JSON #

fetch调用成功后返回的是Response对象，需要调用.json()方法才能拿到接口返回的结构化数据，同时建议统一async/await写法避免逻辑混乱，修改后的代码如下：

export const GET_USER = "GET_USER";

export const getUser = () => {
  return async (dispatch) => {
    try {
      const response = await fetch(`${process.env.REACT_APP_API_URL}/api/user/me`, {
        method: "GET",
        headers: {
          'Authorization': 'Bearer ' + localStorage.token,
          'User': localStorage.user,
        },
        credentials: "same-origin",
      });
      // 核心新增逻辑：将响应解析为JSON格式
      const userData = await response.json();
      console.log('user get:', userData);
      dispatch({type: GET_USER, payload: userData});
    } catch (error) {
      console.log(error);
    }
  };
}

第二步：检查userReducer逻辑是否正确 #

确认你的reducer中对GET_USER类型的action有正确的赋值逻辑，必须返回新的state对象不能直接修改原state，示例参考：

const initialState = {};

const userReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_USER:
      return { ...state, ...action.payload };
    default:
      return state;
  }
};

export default userReducer;

额外检查项 #

• 确认已经配置了redux-thunk中间件来支持异步action，否则返回函数的action无法正常执行
• 确认组件中正确触发了getUseraction，比如使用useDispatch钩子调用dispatch(getUser())

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