在 React 应用中从 JSON 文件获取数据

介绍

创建用于本地测试和开发的API 模型可让您在更快的开发环境中工作。实现 API 模型的一种方法是将 JSON 数据复制到项目目录中的本地文件，然后对该文件而不是真实数据库进行 fetch 或 GET 调用。由于从外部源获取数据仍然是一项异步任务，因此在从 JSON 文件加载数据时可能会遇到许多错误。本指南将演示如何在 React 应用中正确从 JSON 文件获取数据并在前端使用它。

设置本地 JSON 文件

在空白的 Create React App 项目中，在公共目录中创建一个名为data.json的本地 JSON 文件。从 React 组件发出的 Fetch API 调用始终会在此公共目录中查找文件或任何其他相关资产。Create-React-App 不会在编译期间自动将您的资产放入此目录中，因此您必须手动执行此操作。

接下来，在此文件中放入一些虚拟 JSON 数据。出于演示目的，以下示例中使用的 JSON 数据由JSON Generator生成。如果您使用自己的 JSON，请确保其格式正确。

使用 Fetch API 消费本地 JSON 数据

您需要执行的下一步是正确获取这些数据。创建一个使用 JavaScript 的 fetch API 获取本地 JSON 的方法getData() ，并在useEffect中调用它，如下所示。

      const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
      });
  }
  useEffect(()=>{
    getData()
  },[])
    

JSON 文件的路径应为'data.json'或'./data.json'。其他相对路径可能会导致您在尝试访问该资源时出现 404 错误。您还需要传入一些标头，指示Content-Type和Accept as application/json，以告知客户端您正在尝试访问并接受来自服务器的某些 JSON 资源。

将数据加载到组件中

使用useState钩子创建一个状态来存储此数据并将其呈现在 DOM 上。

      const [data,setData]=useState([]);

将获取调用中的 JSON 数据分配给此状态变量。

      const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setData(myJson)
      });
  }
    

根据 JSON 的结构，在渲染或加载数据之前，将相关检查放在组件的返回语句中。当组件挂载到 DOM 上时，会对 JSON 资源进行 GET 调用。但是，由于这是一项异步任务，因此返回语句会在 API 调用之前执行。由于您在获取所需数据后更新状态，因此组件的重新渲染会使用存储在状态中的 JSON 数据更新 DOM。此处使用的 JSON 是一个对象数组，因此相关检查是检查状态是否存在，然后验证其长度是否为非零，如下所示。

      return (
    <div className="App">
     {
       data && data.length>0 && data.map((item)=><p>{item.about}</p>)
     }
    </div>
 );
    

如果您的 JSON 返回一个对象，只需在输出时检查您的状态是否为空，否则您可能会收到错误。

看看下面的整个代码。

      import React,{useState,useEffect} from 'react';
import './App.css';

function App() {
  const [data,setData]=useState([]);
  const getData=()=>{
    fetch('data.json'
    ,{
      headers : { 
        'Content-Type': 'application/json',
        'Accept': 'application/json'
       }
    }
    )
      .then(function(response){
        console.log(response)
        return response.json();
      })
      .then(function(myJson) {
        console.log(myJson);
        setData(myJson)
      });
  }
  useEffect(()=>{
    getData()
  },[])
  return (
    <div className="App">
     {
       data && data.length>0 && data.map((item)=><p>{item.about}</p>)
     }
    </div>
  );
}

export default App;
    

结论

您还可以使用功能强大的第三方库 Axios 对本地 JSON 文件进行 GET 调用，而不是使用 fetch API。通过直接从本地 JSON 文件加载数据，您可以避免在本地开发中对服务器进行大量不必要的调用。或者，通过将 JSON 文件保存为常规 JavaScript 文件并全局导出整个对象，您可以在任何组件中使用它，并在使用外部 API 时节省大量开发时间。

了解更多

探索 Pluralsight 的这些 JSON 和 React 课程以继续学习：

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文