React/Redux fetch请求取JSON数据时读取items属性报undefined问题

错误根因 #

你遇到的报错本质是访问action.body.data时该值为undefined，导致继续读取items属性抛出类型错误，和Immutable库本身的使用没有直接关联。

排查及修复步骤 #

• 第一步：补全fetch响应的JSON解析逻辑
  fetch接口原生返回的是Response对象，必须调用.json()方法才能解析为可直接读取的JS对象，你当前直接把fetch的返回值传给了asyncRequest，大概率是缺失了解析步骤，修改请求代码如下：

export const getItems = (searchString: string, limit?: string, offset?: string) => (dispatch: ThunkDispatch) => {
  const searchUrl = `https://search.items.ai/search?q=${searchString || ''}&offset=${offset ? offset : '0'}&limit=${limit ? limit : '10'}`
  return dispatch(
    asyncRequest(
      // 新增.then(res => res.json())解析响应
      fetch(searchUrl, {
        method: 'GET',
      }).then(res => res.json()), SEARCH_ITEMS)
  )
}

• 第二步：确认异步中间件的action字段命名
  大部分Redux异步中间件会把请求返回的数据放在action.payload字段，而非action.body。你可以在reducer的成功分支先打印完整的action对象，确认字段结构：

case SEARCH_ITEMS.SUCCESS:
  console.log('完整action结构：', action)
  // 确认数据字段后替换对应的属性名即可

• 第三步：添加空值防御避免报错
  不管数据结构是否符合预期，都可以通过可选链+默认值的写法避免直接抛出运行时错误：

// 替换原来的setIn行
return state.setIn([AUTOSUGGEST_ITEMS], fromJS(action?.body?.data?.items || []))

• 第四步：验证Immutable状态路径一致性
  你当前的初始状态只定义了fetchedItems字段，新增的AUTOSUGGEST_ITEMS字段属于顶级状态key，后续在mapStateToProps中读取state.getIn(['searchReducer', searchType])的逻辑是正确的，无需额外调整。

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