如何从React中的JSON文件中生成具有每个值的组件？

[
  { "id": 1, "name": "Item 1", "description": "This is the first item." },
  { "id": 2, "name": "Item 2", "description": "This is the second item." }
]

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

function Item({ item }) {
  return (
    <div>
      <h2>{item.name}</h2>
      <p>{item.description}</p>
    </div>
  );
}

function ItemList() {
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch('/path/to/data.json')
      .then(response => response.json())
      .then(data => setItems(data))
      .catch(error => console.error('Error fetching data:', error));
  }, []);

  return (
    <div>
      {items.map(item => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
}

export default ItemList;