React 处理 API 返回多组数据对象时无法调用 map 方法问题求解

核心原因 #

.map是数组专属方法，你现在存在tutorials里的是接口返回的顶层对象，当然不能直接调用。你要的两个可遍历列表是这个对象下的子属性，直接取出对应数组再遍历即可。

步骤1：先确认赋值逻辑（避免踩axios的嵌套data坑）

axios请求返回的response.data是你贴的完整接口响应体，也就是包含success、data两个字段的对象，你需要的两个数组在它的第二层data属性里。
你可以选择两种赋值方式：

• 方式一：直接存完整响应体（你现在的写法）
  初始化state的时候要匹配结构：

  // React 示例
  const [tutorials, setTutorials] = useState({
    success: false,
    data: {
      favourite_conseils: [],
      suggested_conseils: [],
      specialities: []
    }
  })
  
  // 请求赋值
  axios.get('你的接口地址').then(response => {
    setTutorials(response.data)
  })
  

• 方式二：赋值时直接提取业务层数据（更推荐，后续取值更简单）

  const [tutorials, setTutorials] = useState({
    favourite_conseils: [],
    suggested_conseils: [],
    specialities: []
  })
  
  // 请求赋值时直接取第二层data
  axios.get('你的接口地址').then(response => {
    setTutorials(response.data.data)
  })
  

步骤2：遍历渲染

如果用的是方式一存的完整响应体，遍历写法如下：

// 渲染收藏列表
<h3>收藏建议</h3>
{tutorials.data?.favourite_conseils.map(item => (
  <div key={item.id}>
    <h4>{item.title}</h4>
    <p>{item.message}</p>
    {/* 其他字段按需渲染 */}
  </div>
))}

// 渲染推荐列表
<h3>推荐建议</h3>
{tutorials.data?.suggested_conseils.map(item => (
  <div key={item.id}>
    <h4>{item.title}</h4>
    <p>{item.message}</p>
  </div>
))}

如果用的是方式二存的提取后的数据，去掉.data即可：

{tutorials?.favourite_conseils.map(item => (/* 渲染逻辑 */))}
{tutorials?.suggested_conseils.map(item => (/* 渲染逻辑 */))}

如果你要把两个列表合并成一个遍历

直接用数组展开语法合并即可：

const allConseils = [...(tutorials.data?.favourite_conseils || []), ...(tutorials.data?.suggested_conseils || [])]

// 遍历合并后的数组
{allConseils.map(item => (/* 渲染逻辑 */))}

常见报错排查

• 报Cannot read properties of undefined (reading 'map')：一般是初始值结构不对，或者没加可选链?.做兼容，异步请求完成前数组还没赋值，可选链会自动中断取值不会报错。

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