React项目导出selectUserName时报Cannot read properties of undefined (reading 'name')如何修复

报错原因 #

该错误本质是代码执行到state.user.name时，state.user的值为undefined，无法读取不存在属性的name字段。

修复方案 #

• 方案1：给user模块设置初始值
  如果你的选择器搭配Redux使用，要确保user对应的reducer设置了合法的初始值，避免初始状态下user为undefined：

// user reducer 示例代码
const initialState = {
  name: ''
}
const userReducer = (state = initialState, action) => {
  // 你的业务逻辑
  return state
}

• 方案2：给选择器添加空值保护
  直接修改选择器代码，用可选链运算符做空值判断，即使user为undefined也不会触发报错，还可以搭配空值合并运算符设置兜底值：

// 基础空值保护
export const selectUserName = (state) => state?.user?.name 

// 带兜底默认值
export const selectUserName = (state) => state?.user?.name ?? '匿名用户'

• 方案3：检查store的reducer注册配置
  确认全局store注册reducer时，user模块对应的key是否为user，如果key拼写错误也会导致state.user为undefined：

// 错误配置示例：key写成了userInfo而非user
const store = configureStore({
  reducer: {
    userInfo: userReducer
  }
})
// 修复方式：要么把key改为user，要么修改选择器为state.userInfo.name

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