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

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;

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>
  );
};

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