在 React 组件中使用 JSON 数据文件，怎么去读取请求数据呢？

1200_670 5.png

要在 React 组件中使用 JSON 数据，有多种方法。

常用的有以下几种方法：

1、直接将 JSON 数据作为一个变量或常量引入组件中。

import jsonData from './data.json';function MyComponent() {return (<div><h1>{jsonData.title}</h1><p>{jsonData.content}</p></div>);
}

这种方法直接将 JSON 数据作为一个变量或常量引入到 React 组件中，可以直接使用 JSON 数据的属性进行渲染，例如：jsonData.title。

2、通过 HTTP 请求从后端获取 JSON 数据。

用 Axios 库来发送 HTTP 请求获取 JSON 数据

import React, { useState, useEffect } from 'react';
import axios from 'axios';function MyComponent() {const [jsonData, setJsonData] = useState({});useEffect(() => {axios.get('/api/data').then((response) => {setJsonData(response.data);});}, []);return (<div><h1>{jsonData.title}</h1><p>{jsonData.content}</p></div>);
}

用 Fetch 来发送 HTTP 请求获取 JSON 数据

import React, { useState, useEffect } from 'react';function MyComponent() {const [jsonData, setJsonData] = useState({});useEffect(() => {fetch('./data.json').then(response => response.json()).then(data => setJsonData(data));}, []);return (<div><h1>{jsonData.title}</h1><p>{jsonData.content}</p></div>);
}

这种方法是通过发送 HTTP 请求获取后端的 JSON 数据，通常使用 Fetch 或 Axios 等库来发送 HTTP 请求。在组件的 state 中保存 JSON 数据，当获取到 JSON 数据时更新 state，然后使用 JSON 数据进行渲染。

3、将 JSON 数据作为 props 从父组件传递给子组件。

/* 父组件 */
function ParentComponent() {const jsonData = { title: 'Hello', content: 'World' };return <ChildComponent jsonData={jsonData} />;
}/* 子组件 */
function ChildComponent(props) {return (<div><h1>{props.jsonData.title}</h1><p>{props.jsonData.content}</p></div>);
}

这种方法是将 JSON 数据作为 props 从父组件传递给子组件，在子组件中直接使用 props 中的 JSON 数据进行渲染。

4、通过 import 引入一个包含 JSON 数据的 JS 文件。

React 组件

import jsonData from './data.js';function MyComponent() {return (<div><h1>{jsonData.title}</h1><p>{jsonData.content}</p></div>);
}

data.js 文件

const jsonData = {title: 'Hello',content: 'World'
};export default jsonData;

这种方法是将 JSON 数据保存在一个 JS 文件中，然后通过 import 引入到 React 组件中。在组件中直接使用 import 引入的变量或常量来渲染 JSON 数据。

5、将JSON数据保存在组件的state中，并在组件中进行处理。

import React, { useState } from 'react';function MyComponent() {const [jsonData, setJsonData] = useState({ title: '', content: '' });function handleJsonData() {// 处理JSON数据}return (<div><h1>{jsonData.title}</h1><p>{jsonData.content}</p></div>);
}