在React组件中使用map渲染任务列表时出现未定义元素问题排查

让我帮你梳理下代码里的几个关键问题，这些就是导致你渲染任务列表时出现未定义元素的根源：

1. 状态映射与Reducer字段不匹配 #

你在mapStateToProps里试图获取state.Mission.MissionList，但你的MissionRequestReducer里定义的状态字段是listMission（初始状态和成功回调里都是这个名字），根本不存在MissionList这个属性。这就导致MissionList是undefined，你再调用MissionList.data.map自然会报错。

修复后的mapStateToProps：

const mapStateToProps = (state) => ({ 
  MissionList: state.Mission.listMission, // 改为reducer里的正确字段名listMission
  isLoadingListMission: state.Mission.isLoadingListMission, 
}); 

2. Reducer里的拼写错误 #

在GET_MISSION_REQUEST_REQUESTING的case中，你把isLoadingListMission拼写成了isLoadingListMissione（多了一个字母e）。这会导致加载状态永远无法正确设置为true，后续判断加载状态的逻辑也会失效，可能在数据还没加载完成时就去渲染列表。

修复后的Reducer代码：

case 'GET_MISSION_REQUEST_REQUESTING':
  return { ...state, isLoadingListMission: true, }; // 去掉多余的字母e

3. 请求失败时的状态处理不当 #

当请求失败时，你把listMission设置为null，而null是没有map方法的。如果请求失败后直接去渲染列表，就会因为调用null.map而报错。

修复失败状态的处理，保持字段为数组类型：

case 'GET_MISSION_REQUEST_FAILURE':
  return { ...state, isLoadingListMission: false, listMission: [], }; // 改为空数组，避免map报错

4. Action里的URL参数未正确替换 #

你的getMissionExpertById函数接收id参数，但URL里写的是api/quote/request/:type，没有把:type替换成传入的id。这会导致请求的接口地址不正确，要么返回错误数据，要么直接请求失败，最终MissionList没有数据。

修复Action里的URL：

const url = `api/quote/request/${id}`; // 用传入的id替换占位符:type

5. 渲染时未做空值/加载状态检查 #

即使前面的问题都修复了，在数据还没加载完成（isLoadingListMission为true）或者MissionList为空的情况下，直接调用map也可能报错。所以需要先判断加载状态，再确保MissionList是数组后再渲染。

修复后的渲染代码：

{isLoadingListMission ? (
  <div>加载中...</div>
) : (
  (MissionList || []).map((el) => { 
    // 建议用唯一的id作为key，如果el没有id再用key
    return ( 
      <div key={el.id || el.key}> 
        <p>{el.title}</p> 
      </div> 
    ); 
  })
)}

把这些修复点都改完后，你应该就能正常渲染任务列表，不会再遇到未定义元素的问题了。

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