在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 (
<div>
{data.map(item => (
<div key={item.id}>
<h2>{item.title}</h2>
<p>{item.description}</p>
</div>
))}
</div>
);
};
export default MyComponent;
在上述代码中，我们使用fetch函数发送GET请求来读取data.json文件。然后，我们使用.json()方法将响应解析为JSON格式的数据，并将其存储到名为data的状态中。最后，我们使用map函数遍历data数组，并将每个item的title和description渲染到页面上。
请注意，上述代码是一个函数组件，使用了React的Hooks API（useState和useEffect）。使用函数组件和Hooks API是React的最新推荐用法。