ReactJS调用Rick and Morty API时报错Cannot read properties of undefined (reading 'map')

• 状态结构不匹配：reducer的初始状态中characters被设为空对象{}，请求发起时的FETCH_CHARACTERS_REQUEST分支又将characters改为空数组[]，两种状态下characters都不存在results属性。组件首次渲染时异步请求还未返回，直接读取characters.results得到的就是undefined，调用map方法直接触发报错。
• 缺少渲染前置校验：组件没有对加载状态、数据可用性做判断，直接尝试遍历可能不存在的数组。
• 额外语法问题：map回调使用大括号但没有写return语句，即使解决了报错也无法正常渲染内容。

1. 修正characterReducers.js的状态结构 #

保持characters的结构和接口返回结构对齐，初始就预设results空数组，请求状态不修改原有characters的结构：

import {
  FETCH_CHARACTERS_REQUEST,
  FETCH_CHARACTERS_SUCCESS,
  FETCH_CHARACTERS_FAIL,
} from '../actions/characters/characterConstants'

export const characterListReducer = (state = { loading: false, characters: { results: [] }, error: null }, action) => {
  switch(action.type) {
    case FETCH_CHARACTERS_REQUEST:
      return { ...state, loading: true }
    case FETCH_CHARACTERS_SUCCESS:
      return { ...state, loading: false, characters: action.payload }
    case FETCH_CHARACTERS_FAIL:
      return { ...state, loading: false, error: action.payload }
    default:
      return state;
  }
} 

2. 修正HomeScreen.js的渲染逻辑 #

增加加载、错误状态的判断，补全map的返回逻辑，也可以添加可选链做兜底校验：

const HomeScreen = () => {
  const dispatch = useDispatch()
  const charactersList = useSelector(state => state.charactersList)
  const { loading, error, characters } = charactersList

  console.log(characters.results)
  
  useEffect(() => {
    dispatch(getCharacters())
  }, [dispatch])

  if (loading) return <div>加载中...</div>
  if (error) return <div>加载失败：{error}</div>

  return (
    <div>
     {characters.results.map((character) => (
       <h1 key={character.id}>{character.name}</h1>
     ))}
    </div>
  )
}

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