如何从本地文件返回React中的JSON数组，并将其映射到我的所有项？

fetch('/data.json')
  .then(response => response.json())
  .then(data => {
    // 在这里处理获取到的JSON数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

import axios from 'axios';

axios.get('/data.json')
  .then(response => {
    const data = response.data;
    // 在这里处理获取到的JSON数据
  })
  .catch(error => {
    console.error('Error:', error);
  });

data.map(item => (
  <YourComponent key={item.id} data={item} />
))

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

const YourComponent = ({ data }) => {
  // 在这里渲染每个对象的数据
  return (
    <div>
      <h2>{data.title}</h2>
      <p>{data.description}</p>
    </div>
  );
};

const YourParentComponent = () => {
  const [jsonData, setJsonData] = useState([]);

  useEffect(() => {
    axios.get('/data.json')
      .then(response => {
        const data = response.data;
        setJsonData(data);
      })
      .catch(error => {
        console.error('Error:', error);
      });
  }, []);

  return (
    <div>
      {jsonData.map(item => (
        <YourComponent key={item.id} data={item} />
      ))}
    </div>
  );
};

export default YourParentComponent;