React中API响应数据处理：用map提取标题与章节数组的方法

我来帮你搞定这两个数据提取的问题，顺便拆解下错误原因和正确的处理思路～

一、提取titles数组（处理data1） #

你的原代码问题在于：箭头函数使用大括号{}包裹时，属于代码块模式，必须显式用return返回值，否则map会默认返回undefined，导致最终得到的是全undefined的数组。

正确写法有两种： #

1. 简洁箭头函数（自动返回表达式结果）

const titles = data1.map(item => item.title);

2. 带大括号的显式返回

const titles = data1.map((item) => {
  return item.title; // 必须加return才会返回对应值
});

可选优化（处理空数据/缺失字段） #

如果担心data1为空数组，或者某个item没有title属性，可以加可选链和默认值避免报错：

const titles = data1.map(item => item?.title ?? '');

二、提取chapters数组（处理data2） #

你的原代码错误在于：data2是一个数组，没有直接的chapters属性，每个数组元素（item）才包含chapters数组。而且每个item的chapters又是一个数组，需要先提取每个chapter的chapter值，再把所有子数组合并成一维数组。

推荐写法（用flatMap一步完成） #

flatMap可以先执行map操作，再自动将结果数组扁平化一层，非常适合这种嵌套数组的提取：

const chapters = data2.flatMap(item => {
  // 先提取当前item的chapters数组里的每个chapter值，为空时返回空数组避免报错
  return item?.chapters?.map(chapter => chapter.chapter) ?? [];
});

分步写法（更直观） #

如果觉得flatMap不好理解，可以拆成map+flat两步：

// 第一步：提取每个item的chapters数组中的chapter值，得到二维数组
const chaptersArray = data2.map(item => item?.chapters?.map(ch => ch.chapter) ?? []);
// 第二步：将二维数组扁平化为一维数组
const chapters = chaptersArray.flat();

关键逻辑说明 #

• 先遍历data2的每个元素，拿到每个元素内部的chapters数组
• 对每个chapters数组再做一次map，提取其中的chapter字段
• 最后把所有分散的子数组合并成一个一维数组，就是你要的[chapter1, chapter2, chapter3]

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