React中多层嵌套数组的遍历方案 如何渲染嵌套数组内全部目标字段

核心思路 #

把嵌套数组的文本提取逻辑和渲染逻辑分离，先把所有符合要求的文本拍平为一维数组，再传入组件渲染，避免JSX中嵌套多层map导致可读性下降。

具体实现 #

步骤1：抽离嵌套数据提取函数 #

先写一个单独的函数处理数据提取，空值判断和拍平逻辑都封装在内部：

// 提取单个recipe下所有的tipo_titulo文本
const getAllAventuraTitles = (recipe) => {
  // 边界判断：tipo_aventura不是数组的话直接返回空数组
  if (!Array.isArray(recipe?.data?.tipo_aventura)) return []
  // 遍历所有tipo_aventura项，提取有效文本，flatMap自动过滤空值
  return recipe.data.tipo_aventura.flatMap(item => {
    return Array.isArray(item.tipo_titulo) && item.tipo_titulo[0]?.text 
      ? item.tipo_titulo[0].text 
      : []
  })
}

步骤2：遍历渲染时调用函数 #

修改原遍历逻辑，调用提取函数拿到所有标题后传入组件：

{recipes.map((recipe) => {
  const aventuraTitles = getAllAventuraTitles(recipe)
  return (
    <Recipe
      key={recipe.uid}
      title={recipe.data.title?.[0]?.text || null}
      description={recipe.data.intro?.[0]?.text || null}
      image={recipe.data.featured_image.url || null}
      imageAlt={recipe.data.featured_image.alt || null}
      // 传入全量标题数组，组件内部可自由选择渲染方式（顿号分隔/列表渲染等）
      aventuraTitles={aventuraTitles}
    />
  )
})}

不同场景适配 #

• 如果不想修改Recipe组件的props定义，可直接把拍平后的数组拼接为字符串传入：aventuraTitle={aventuraTitles.join('、') || null}
• 如果后续嵌套层级继续加深，可把提取函数改为递归实现，适配任意层级的嵌套结构：

// 通用递归提取嵌套文本函数
const getAllNestedText = (arr, childKey) => {
  if (!Array.isArray(arr)) return []
  return arr.flatMap(item => {
    if (Array.isArray(item[childKey])) {
      return getAllNestedText(item[childKey], childKey)
    }
    return item?.text ? [item.text] : []
  })
}
// 调用示例
const aventuraTitles = getAllNestedText(recipe?.data?.tipo_aventura, 'tipo_titulo')

方案优势 #

• 逻辑分离：数据处理和渲染代码互不干扰，后续修改字段规则只需要调整提取函数
• 稳定性：内置全链路空值判断，避免某一层数据缺失导致的渲染报错
• 复用性：提取函数可复用在其他同类嵌套字段的处理场景

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