react怎么读取json数据

在React中读取JSON数据可以使用fetch函数来发送请求并获取数据。以下是一个示例代码：

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

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

  useEffect(() => {
    fetch('data.json') // 读取data.json文件
      .then(response => response.json()) // 将响应解析为JSON格式
      .then(jsonData => setData(jsonData)) // 将JSON数据存储到状态中
      .catch(error => console.error(error)); // 处理请求错误
  }, []);

  return (
    

      {data.map(item => (
        

          
{item.title}
          
{item.description}
        
      ))}
    
  );
};

export default MyComponent;

在上述代码中，我们使用fetch函数发送GET请求来读取data.json文件。然后，我们使用.json()方法将响应解析为JSON格式的数据，并将其存储到名为data的状态中。最后，我们使用map函数遍历data数组，并将每个item的title和description渲染到页面上。

请注意，上述代码是一个函数组件，使用了React的Hooks API（useState和useEffect）。使用函数组件和Hooks API是React的最新推荐用法。