React+TypeScript如何遍历JSON嵌套数组对象并渲染？

核心问题 #

所有报错和渲染失败的根源有三个：

1. 内层changes?.map的回调函数没有返回有效的JSX元素，仅单纯引用变量，无法被React识别为可渲染节点；
2. 部分组件（如MapChangeLog）未返回任何JSX内容，不符合React组件的要求；
3. 代码中字段名与JSON结构不匹配：JSON里是title/content，但代码中用了version/description，导致数据无法正确读取。

逐个错误修复 #

1. 自定义组件MapChangeLog报错修复

原组件未返回渲染内容，且内层map无JSX返回。修复后：

function MapChangeLog() {
  // 必须return生成的JSX数组
  return ChangeLogs.map((changeLog, index) => {
    return (
      <div key={index}>
        {/* 修正字段名：JSON里是title */}
        {changeLog.title}
        {changeLog.date}
        {/* 内层map返回JSX元素 */}
        {changeLog.changes?.map((change, changeIndex) => (
          <div key={changeIndex}>
            {/* 修正字段名：JSON里是content */}
            {change.type} - {change.content}
          </div>
        ))}
      </div>
    );
  });
}

2. Home组件变量存储遍历结果无渲染修复

原代码定义了change变量，但未在JSX中渲染它。修复后：

export default function Home() {
  const change = ChangeLogs.map((changeLog, index) => {
    return (
      <div key={index}>
        {changeLog.title}
        {changeLog.date}
        {changeLog.changes?.map((change, changeIndex) => (
          <div key={changeIndex}>
            {change.type} - {change.content}
          </div>
        ))}
      </div>
    );
  });

  // 必须将change变量放入渲染的JSX中
  return <>{change}</>;
}

3. 直接嵌套遍历报错修复

内层changes?.map的回调需要返回JSX，而非仅引用变量。修复后：

export default function Home() {
  return (
    <>
      <h1>Mudanças no sistema</h1>
      {ChangeLogs.map((changeLog, index) => (
        <div key={index} style={{ marginBottom: '16px' }}>
          {changeLog.title}
          <br />
          {changeLog.date}
          <br />
          {/* 内层map返回可渲染的JSX元素 */}
          {changeLog.changes?.map((change, changeIndex) => (
            <div key={changeIndex} style={{ marginLeft: '16px', marginTop: '8px' }}>
              类型: {change.type}，内容: {change.content}
            </div>
          ))}
        </div>
      ))}
    </>
  );
}

关键注意事项 #

• 字段匹配：确保代码中使用的字段名与JSON结构完全一致（比如你的JSON里没有version和description，要换成title和content）；
• map回调返回值：所有用于渲染的map回调必须返回JSX元素或ReactNode类型的值；
• key属性：遍历生成列表时必须添加唯一的key属性，避免React警告；
• 组件返回值：React组件必须返回有效的JSX内容，不能无return或返回void。

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