react-redux使用connect时报错state.users.find is not a function问题咨询

错误根因 #

state.users.find is not a function 报错的本质是：find是仅数组类型具备的实例方法，你当前redux仓库中state.users的实际类型不是数组，可能是undefined、null、对象或者其他基础类型。

排查&修复步骤 #

• 首先确认users reducer的初始默认值：绝大多数该类问题都是初始化时给users设置了错误的默认值，比如写为{}（空对象）或者未设置默认值导致初始值为undefined，可以在mapStateToProps第一行加日志打印确认值：console.log('state.users类型：', typeof state.users, '值：', state.users)。
• 检查用户相关reducer的更新逻辑：确认fetchUser对应action触发后，有没有错误地将users整个覆盖为非数组类型，比如把接口返回的单个用户对象直接赋值给state.users，而非追加到原有数组中。
• 如果你的业务设计本身就是把users存为以用户id为key的对象结构（性能更优，避免每次遍历查找），直接修改mapStateToProps的取值逻辑即可，不需要调用find方法。

常见场景修复示例 #

场景1：users确实应该存为数组 #

修正users reducer的初始值和更新逻辑即可：

// users reducer 正确写法
const usersReducer = (state = [], action) => {
  switch(action.type) {
    case 'FETCH_USER_SUCCESS':
      // 新用户追加到数组中，避免重复可以加去重逻辑
      const exist = state.find(item => item.id === action.payload.id)
      return exist ? state : [...state, action.payload]
    default:
      return state
  }
}

场景2：users设计为对象结构（键为用户id） #

修改mapStateToProps逻辑：

const mapStateToProps = (state , ownProps) => {
  return {user : state.users[ownProps.userId]}
}

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