Redux中用useSelector访问API返回对象内部属性返回undefined如何解决

最常见的原因有3类，按出现概率排序：

• 异步时序+控制台打印引用类型的坑：组件首次渲染时，Redux中存储宝可梦数据的状态还是初始空值/空对象，此时直接访问属性自然返回undefined。你在控制台看到的完整对象是引用类型的特性：你点击展开对象时浏览器才会读取当前最新的状态值，而接口请求成功后状态已经更新，所以展开后能看到完整属性，实际上第一次渲染时属性确实不存在。
• Reducer赋值层级错误：你在Reducer中处理请求成功的action时，给状态多加了一层嵌套，比如本来要直接把接口返回数据挂载到pokemonState下，实际写成了挂载到pokemonState的某个子字段下，直接访问根属性自然找不到。
• 路由跳转时机错误：你在搜索页触发请求后立刻跳转结果页，此时异步请求还未返回，Redux中还没有写入宝可梦数据。

1. 处理异步时序问题 #

• 给状态加合理初始值：Reducer的初始状态不要设为null或{}，要匹配接口返回的结构预设默认值，示例：

const initialState = {
  name: '',
  id: null,
  sprites: {},
  types: [],
  stats: []
}

• 访问属性时用可选链操作符，渲染前加加载判断：

// 取值时写法
const name = useSelector(state => state.pokemon?.name)

// 渲染前判断
if (!pokemonState.id) return <div>宝可梦数据加载中...</div>
// 后续正常渲染内容即可

2. 校验Reducer逻辑 #

检查请求成功的case分支，确保状态赋值和你取值的层级匹配：
如果你的取值逻辑是state.pokemon.name，那Reducer的写法应该是：

case 'FETCH_POKEMON_SUCCESS':
  return {
    ...state,
    // 直接把接口返回的所有属性挂载到pokemon状态下
    ...action.payload
  }

如果你的Reducer是把数据存在子字段里：

case 'FETCH_POKEMON_SUCCESS':
  return {
    ...state,
    data: action.payload
  }

那取值就要对应改成state.pokemon.data?.name

3. 调整路由跳转时机 #

不要触发请求就立刻跳转，等异步请求成功后再执行跳转操作，示例代码：

// 异步action写法
export const fetchPokemon = (pokemonName, navigate) => async dispatch => {
  try {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${pokemonName.toLowerCase()}`)
    const pokemonData = await res.json()
    dispatch({ type: 'FETCH_POKEMON_SUCCESS', payload: pokemonData })
    // 请求成功后再跳转结果页
    navigate('/result')
  } catch (e) {
    console.error('宝可梦信息查询失败', e)
  }
}

// 搜索组件调用
const navigate = useNavigate()
const handleSearch = () => {
  dispatch(fetchPokemon(searchInput, navigate))
}

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