如何在渲染函数中显示来自map循环中调度方法的数据

import React, { useState } from 'react';

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

  // 假设这是一个从后端获取数据的异步方法
  const fetchData = async () => {
    // 调用后端API获取数据
    const response = await fetch('https://example.com/api/data');
    const result = await response.json();
    setData(result);
  };

  const renderData = (item) => {
    // 在这里可以访问到来自map循环中调度方法的数据
    return (
      <div key={item.id}>
        <h3>{item.title}</h3>
        <p>{item.description}</p>
      </div>
    );
  };

  return (
    <div>
      <button onClick={fetchData}>获取数据</button>
      {data.map(renderData)}
    </div>
  );
}

export default MyComponent;