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

news2024/12/27 11:59:24

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>
  );
}