通过外部 API 将数据访问到 React 组件中
介绍
从外部 API 获取数据并使用该数据渲染 React 组件是构建 React 应用的常见任务。在本指南中，您将学习如何从 GitHub 用户 API 获取 JSON 数据并在 React 组件内渲染该数据。这将帮助您发出由浏览器发起的异步请求（包括跨网络的请求）来获取资源。
方法
您可以使用两种方法从网络获取数据。
- Fetch，一种可在浏览器中获取网络资源的 Web API。
- Axios，一个基于Promise的浏览器和 node.js npm库。
您将从 GitHub 用户 API 中获取特定用户名的数据，并呈现一个 React 组件来显示用户的详细信息，包括该用户的姓名、位置、博客 URL 和公司名称。
设置 React App
第一步是设置 React 应用。打开终端并运行以下命令，以在您的机器上运行示例 Create React App (CRA)。
npx create-react-app access-api-react
cd access-api-react
yarn start
这将以开发模式启动您的应用。要检查示例应用是否正在运行，请在浏览器中打开https://localhost:3000 。您应该会看到一个 React 徽标。
返回到您的终端并在项目根目录中添加axios的npm依赖项。您将需要此库来向 GitHub API 发送请求。
yarn add axios
修改应用程序组件
在您最喜欢的编辑器中打开项目，并从<App>组件中删除所有样板代码。您将在src/目录中找到该文件。在您的组件中添加以下代码。
import React, { useState, useEffect } from "react";
import "./App.css";
const gitHubUrl = "https://api.github.com/users/deekshasharma";
function App() {
const [userData, setUserData] = useState({});
useEffect(() => {
getGitHubUserWithFetch();
}, []);
const getGitHubUserWithFetch = async () => {};
return (
<div className="App">
<header className="App-header">
<h2>GitHub User Data</h2>
</header>
<div className="user-container">
<h5 className="info-item">{userData.name}</h5>
<h5 className="info-item">{userData.location}</h5>
<h5 className="info-item">{userData.blog}</h5>
<h5 className="info-item">{userData.company}</h5>
</div>
</div>
);
}
export default App;
在上面的代码中，gitHubUrl是一个变量，其中包含用户名deekshasharma的 GitHub API URL 。它被声明为const，因为这个值不会改变。
下面的 State Hook 将允许在<App>函数组件中使用状态，而无需编写单独的类组件。userData是一个最初为空的对象（useState({})）。一旦从网络获取数据，它将包含用户数据（姓名、位置、博客和公司）。setUserData相当于编写this.setState()以使用userData的值更新组件状态。
const [userData, setUserData] = useState({});
接下来是 Effect Hook，它允许您执行副作用操作，例如获取数据、清理或 DOM 操作。useEffect()将一个函数作为参数，该函数将在第一次渲染后和每次组件更新后执行。因此，此函数是调用getGitHubUserWithFetch()函数的合适位置，该函数的作用是从 GitHub API 获取用户数据并更新组件。将第二个参数传递给useEffect是可选的。传递一个空数组[]可确保此效果只运行一次；否则，它将在每次渲染后运行。
useEffect(() => {
getGitHubUserWithFetch();
}, []);
getGitHubUserWithFetch()是一个没有实现的异步函数。我们很快就会在这个函数里写代码。
最后，<App>组件返回一个标题，其中包含文本“GitHub User Data”和在<div>元素内呈现的用户数据（姓名、位置、博客和公司）。
return (
<div className="App">
<header className="App-header">
<h2>GitHub User Data</h2>
</header>
<div className="user-container">
<h5 className="info-item">{userData.name}</h5>
<h5 className="info-item">{userData.location}</h5>
<h5 className="info-item">{userData.blog}</h5>
<h5 className="info-item">{userData.company}</h5>
</div>
</div>
);
将src/App.css中的内容替换为以下代码。现有样式略有更改，并添加新样式以在网页上显示用户数据。
.App {
text-align: center;
}
.App-header {
background-color: #282c34;
min-height: 10vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.user-container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.info-item {
width: 15vw;
height: 5vh;
padding: 2em;
border: 2px solid rgb(159, 12, 22);
align-self: center;
background-color: #63b7af;
border-radius: 2em;
}
使用 Fetch API 获取数据
以下是如何实现getGitHubUserWithFetch()函数。下面的代码使用async/await，以便异步代码可读且看起来像是同步执行。
虽然异步函数总是返回一个Promise，但在这种情况下不需要返回值，因为setUserData()是在函数本身中使用生成的jsonData进行调用的。
现在出现了fetch() API，它将 URL 作为参数，向该 URL 发出网络请求，并返回解析为响应对象的Promise。
fetch()函数前面的await关键字会暂停代码，直到fetch()返回已实现的Promise，之后它返回已解析的值response。
然后使用json()方法将响应解析为 JSON ，该方法还返回一个解析为 JSON 对象jsonData的Promise。使用await再次暂停代码，直到响应解析为 JSON。然后使用生成的 JSON 对象jsonData调用setUserData() 。它使用 GitHub 用户数据更新<App>组件的状态。
const getGitHubUserWithFetch = async () => {
const response = await fetch(gitHubUrl);
const jsonData = await response.json();
setUserData(jsonData);
};
要验证代码更改，请打开浏览器访问https://localhost:3000，您应该能够查看以用户名deekshasharma的 React 组件形式呈现的 GitHub 用户详细信息。
使用 Axios 获取数据
从 GitHub API 获取数据的第二种方法是使用 Axios 库。您已经在项目中安装了依赖项。现在您需要做的就是将其导入src/App.js中。因此，继续添加此导入。
import axios from "axios";
在您的<App>组件中添加另一个使用 Axios 的函数 getGiHubUserWithAxios() 。由于它是一个基于Promise的库，因此您可以无缝地用async/await替换Promise.then()。
该库的get()方法将 URL 作为参数，并向该 URL 发出http请求。然后，它会自动将响应转换为 JSON，您可以从其data属性中获取该 JSON。一旦收到数据，组件的状态就会通过setUserData()函数更新。
const getGiHubUserWithAxios = async () => {
const response = await axios.get(gitHubUrl);
setUserData(response.data);
};
在您的<App>组件内，确保在useEffect()<font style="vert
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~