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