如何正确访问Redux Store中的数据 解决属性读取undefined报错问题

问题根因与解决方案 #

你遇到的报错本质是组件首次渲染时，待访问的 Redux 状态还未完成赋值，对应状态值为undefined，读取其属性自然触发报错，可按以下优先级排查修复：

1. 检查 Reducer 初始值设置 #

确认你对应 reducer 的初始状态设置了默认值，不能直接留空或者设为undefined：

• 如果存储的是单篇文章对象，初始值至少设为{}
• 如果存储的是文章列表数组，初始值至少设为[]
  示例正确的reducer初始值配置：

const initialState = {
  currentArticle: {}, // 单篇文章默认空对象
  loading: false,
  error: null
}

const articleReducer = (state = initialState, action) => {
  // 后续switch逻辑
}

2. 渲染前加非空判断或使用可选链 #

因为拉取接口是异步操作，请求返回前状态还是初始值，渲染时先判断是否存在再访问属性：

• 条件渲染写法：

// 只有article存在时才渲染内部内容
{article && (
  <div>
    <p>作者：{article.author}</p>
    <p>内容：{article.content}</p>
  </div>
)}

• 可选链写法（ES2020+支持，更简洁）：

<p>作者：{article?.author}</p>
<p>内容：{article?.content}</p>

3. 校验状态取值路径 #

如果用了combineReducers合并多个reducer，确认useSelector或者mapStateToProps的取值路径和你挂载reducer的层级一致，比如你合并reducer时的配置为：

const rootReducer = combineReducers({
  articleModule: articleReducer
})

那你取reducer内部存储的currentArticle字段时，必须写全层级：

// 错误写法：漏了挂载的articleModule层级，取到的是undefined
const article = useSelector(state => state.currentArticle)
// 正确写法：和reducer挂载层级完全匹配
const article = useSelector(state => state.articleModule.currentArticle)

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