如何在React中映射嵌套的JSON响应

在React中映射嵌套的JSON响应可以通过以下步骤实现：

首先，将从API获取的JSON响应保存在React组件的状态中。可以使用useState钩子来创建一个状态变量，并使用useEffect钩子来获取API响应并更新状态。

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch('api-url')
      .then(response => response.json())
      .then(jsonData => setData(jsonData));
  }, []);

  // 其他组件代码...

  return (
    // JSX代码...
  );
};

export default MyComponent;

接下来，使用map函数遍历嵌套的JSON响应，并为每个项创建相应的React元素。可以使用递归来处理嵌套的JSON结构。

const renderNestedData = (data) => {
  return data.map((item, index) => {
    if (item.children) {
      return (
        <div key={index}>
          <h3>{item.title}</h3>
          {renderNestedData(item.children)}
        </div>
      );
    } else {
      return (
        <div key={index}>
          <p>{item.title}</p>
        </div>
      );
    }
  });
};

const MyComponent = () => {
  // ...

  return (
    <div>
      {renderNestedData(data)}
    </div>
  );
};

在上面的示例中，假设JSON响应的结构如下所示：

[
  {
    "title": "Item 1",
    "children": [
      {
        "title": "Subitem 1.1"
      },
      {
        "title": "Subitem 1.2"
      }
    ]
  },
  {
    "title": "Item 2"
  }
]

这样，React组件将会渲染出一个嵌套的列表，其中包含了JSON响应中的所有项和子项。

这是一个基本的示例，你可以根据实际需求进行修改和扩展。关于React的更多信息和用法，请参考React官方文档。