React中如何对接口返回的含20个对象的results数组执行map遍历？

首先明确问题：你初始化state为数组[]，但后续存入的是包含results和info的对象，所以当前data是对象类型而非数组。Object.values(data)返回的是该对象的属性值数组，其中第一个元素就是你需要遍历的20个对象组成的results数组。

下面是几种可行的遍历方式：

方式1：直接访问data.results（推荐） #

直接通过对象属性访问目标数组，搭配可选链?.避免初始状态下的报错：

data.results?.map(item => {
  // 编写你的遍历逻辑，比如渲染组件
  return <div key={item.id}>{item.content}</div>;
});

• 可选链?.的作用：初始时data是[]，data.results会是undefined，?.会让map不执行，避免抛出Cannot read properties of undefined的错误。

方式2：从Object.values(data)中取第一个元素 #

这种方式依赖对象属性的顺序，可读性较差，不推荐，但如果需要可以用：

(Object.values(data)[0] || []).map(item => {
  // 遍历逻辑
  return <div key={item.id}>{item.content}</div>;
});

• || []的作用：初始状态下Object.values([])是空数组，取索引0会得到undefined，加上|| []可以保证始终有一个数组来执行map。

方式3：修正state初始值（更规范） #

将state初始值改为与接收数据结构一致的对象，让代码逻辑更清晰：

// 初始化时匹配数据结构
const [data, setData] = useState({ results: [], info: {} });

// 后续直接遍历results
data.results.map(item => {
  // 遍历逻辑
  return <div key={item.id}>{item.content}</div>;
});

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