为何我的JSON数组使用map方法时返回undefined？

尝试映射JSON文件中的数组时，console.log结果显示为undefined，怀疑问题出在JSON文件，但无法定位错误。

JSON文件内容 #

{"homepage": {"servicios": {"subheader": "Servicios","title": "Áreas de Práctica","cards": [{"id": "1","title": "Empresarial","body": "lorem ipsum"},{"id": "2","title": "Protección de datos personales","body": "lorem ipsum"},{"id": "3","title": "Penal","body": "lorem ipsum"},{"id": "4","title": "Laboral","body": "lorem ipsum"},{"id": "5","title": "Migratorio","body": "lorem ipsum"}]}}}

React代码 #

import { Container, Col, Row } from "react-bootstrap";
import texts from "../../text/global.json";

function CardDeck() {
  const cards = [texts.homepage.servicios.cards];
  return (
    <>
          <Row>
            {cards.map((card) => {
              return <div>{card.title}</div>;
            })}
          </Row>
    </>
  );
}

export default CardDeck;

问题分析 #

JSON文件结构完全正确，错误出在React代码的数组赋值环节：

• texts.homepage.servicios.cards本身就是一个数组，你用[]包裹后，cards变成了嵌套数组（即[ [ {...}, {...}, ... ] ]）
• 调用map时，遍历的是外层数组的唯一元素（原cards数组），此时card指向整个数组，自然不存在title属性，返回undefined

解决方案 #

直接将texts.homepage.servicios.cards赋值给cards，无需额外包裹数组：

function CardDeck() {
  // 去掉外层[]，直接取原数组
  const cards = texts.homepage.servicios.cards;
  // 可选：添加可选链操作符，防止层级不存在导致报错
  // const cards = texts?.homepage?.servicios?.cards || [];
  return (
    <>
      <Row>
        {cards.map((card) => {
          return <div key={card.id}>{card.title}</div>;
        })}
      </Row>
    </>
  );
}

另外，建议给map返回的元素添加key属性（用card.id），符合React的列表渲染规范。

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