React中mapStateToProps传递rotaData为undefined问题求助

我来帮你一步步排查并解决这个问题，主要有几个核心问题需要修正：

1. 异步Action未正确处理 #

你的getShifts action直接返回了API.get的Promise对象，但Redux默认只能处理同步action。异步操作需要借助中间件（比如redux-thunk）来等待请求完成后再分发带有实际数据的action。

修改你的action代码：

import settings from '../../aws-config.js';
import Amplify, { Auth, API } from 'aws-amplify';

export const GET_STAFF_SHIFTS = 'get_staff_shifts';
export const GET_STAFF_SHIFTS_FAILED = 'get_staff_shifts_failed'; // 新增错误处理类型

export function getShifts() {
  // 返回一个函数，借助redux-thunk处理异步逻辑
  return async (dispatch) => {
    console.log('Fetching list of shifts for user...');
    try {
      // 等待API请求完成
      const response = await API.get("StaffAPI", "/shifts", {
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'application/json',
        }
      });
      // 请求成功后分发action，携带实际返回的数据
      dispatch({
        type: GET_STAFF_SHIFTS,
        payload: response // 若接口返回的是包含data字段的对象，这里改为response.data
      });
    } catch (error) {
      console.error('Failed to fetch shifts:', error);
      // 请求失败时分发错误action
      dispatch({
        type: GET_STAFF_SHIFTS_FAILED,
        payload: error
      });
    }
  };
}

2. Reducer缺少Default Case #

你的reducer没有default分支，当其他action触发时，reducer会返回undefined，直接导致整个state被覆盖，最终props.rotaData变成undefined。同时初始state可以优化为包含rotaData的结构，避免初始值异常。

修改reducer代码：

import _ from "lodash"
import { GET_STAFF_SHIFTS, GET_STAFF_SHIFTS_FAILED } from '../actions';

// 初始state设置rotaData为null，避免初始undefined
export default function(state = { rotaData: null, error: null }, action) {
  switch(action.type){
    case GET_STAFF_SHIFTS:
      return {
        ...state,
        rotaData: action.payload,
        error: null // 清除之前的错误状态
      };
    case GET_STAFF_SHIFTS_FAILED:
      return {
        ...state,
        error: action.payload,
        rotaData: null // 可根据需求选择是否保留旧数据
      };
    // 必须添加default分支，返回当前state
    default:
      return state;
  }
}

3. 检查State结构是否正确 #

如果你的reducer是通过combineReducers合并到根reducer中的，比如：

import { combineReducers } from 'redux';
import shiftReducer from './shiftReducer'; // 你的排班reducer

export default combineReducers({
  shifts: shiftReducer // 这里的键名是shifts
});

那你的mapStateToProps需要对应根state的结构，修改如下：

function mapStateToProps(state){
  // 访问根state中对应reducer的分支
  return {
    rotaData: state.shifts.rotaData,
    error: state.shifts.error // 可选，用于错误提示
  };
}

export default connect(mapStateToProps, { getShifts })(StaffRota);

4. 确保配置了Redux-Thunk中间件 #

要让Redux支持返回函数的异步action，需要在创建store时加入redux-thunk中间件：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(
  rootReducer,
  applyMiddleware(thunk)
);

export default store;

5. 在组件中触发请求 #

最后在StaffRota组件的合适生命周期中触发getShifts，比如类组件的componentDidMount：

class StaffRota extends React.Component {
  componentDidMount() {
    // 组件挂载时发起请求
    this.props.getShifts();
  }

  render() {
    const { rotaData, error } = this.props;

    if (error) {
      return <div>获取排班数据失败：{error.message}</div>;
    }
    if (!rotaData) {
      return <div>加载中...</div>;
    }

    // 渲染排班数据
    return <div>{JSON.stringify(rotaData)}</div>;
  }
}

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