React应用中如何正确映射遍历Strapi V4返回的接口对象

架构老林

2026-9-1

问题根因

两类报错都是没有适配Strapi V4的新版响应结构、缺少空值兜底导致的：

Uncaught TypeError: button.map is not a function：map是数组原型方法，直接对Strapi返回的顶层响应对象（包含data、meta两个键的普通对象）调用map，对象本身没有map方法，会直接触发类型错误。
Uncaught TypeError: Cannot read properties of undefined (reading 'map')：取值路径错误，Strapi V4单条接口返回的业务字段全部挂载在data.attributes下，跳过attributes层直接取字段会拿到undefined，对undefined调用map就会触发该错误；另外组件首次渲染时接口请求还未返回，state如果初始值不是数组，也会触发同类错误。

正确实现方案

按照以下步骤调整代码即可彻底解决问题：

存储按钮列表的state初始值必须设置为空数组[]，避免首次渲染时无数据调用map报错
fetch拿到响应后严格按照Strapi V4的结构逐层解构取值，不要跨层取字段
全程加可选链、空值兜底，避免接口异常、字段缺失时触发类型错误
如果按钮配置是分散存在firstBtn、secondBtn这类独立字段下，取值后手动整理为数组再遍历即可

参考实现代码

import { useState, useEffect } from 'react'

export default function StrapiButtonGroup() {
  // 初始值固定为空数组，从根源避免首次渲染的map报错
  const [buttonList, setButtonList] = useState([])
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const getConfig = async () => {
      try {
        const res = await fetch('替换为你的实际Strapi接口地址')
        // 顶层响应结构：{ data: {id, attributes}, meta: {} }
        const response = await res.json()
        // 逐层安全取值，任意一层不存在都兜底为空对象
        const pageAttributes = response?.data?.attributes || {}
        // 把分散的按钮字段整理为标准数组，过滤掉空值
        const formatButtons = [
          pageAttributes.firstBtn,
          pageAttributes.secondBtn,
          // 存在thirdBtn等其他按钮配置可继续追加
        ].filter(Boolean)

        setButtonList(formatButtons)
      } catch (error) {
        console.error('按钮配置拉取失败', error)
        setButtonList([])
      } finally {
        setLoading(false)
      }
    }

    getConfig()
  }, [])

  if (loading) return <div>配置加载中</div>

  return (
    <div className="button-container">
      {/* 此时buttonList永远是数组类型，可安全调用map */}
      {buttonList.map((btnConfig, idx) => (
        <button
          key={idx}
          // 按你实际的按钮配置字段取属性即可
          to={btnConfig.link}
          className={btnConfig.theme}
        >
          {btnConfig.label}
        </button>
      ))}
    </div>
  )
}

避坑提示

不要对非数组类型的值调用map，调用前可以通过Array.isArray(待遍历值)做类型校验
Strapi V4如果配置了组件/关联关系的populate，关联数据同样遵循{data: {id, attributes}}的嵌套结构，取值时不要跳过attributes层
如果接口返回的是列表数据，顶层data是数组，数组每一项都是{id, attributes}结构，遍历数组后再取每一项的attributes即可

内容的提问来源于stack exchange，提问作者Dwi Setyo Aji