本教程将教您如何使用 Axios 获取数据，然后如何操作它并最终通过过滤功能将其显示在您的页面上。您将在此过程中学习如何使用映射、过滤器和包含方法。最重要的是，您将创建一个简单的加载器来处理从 API 端点获取的数据的加载状态。
1. 设置项目
让我们在终端中使用 create-react-app 命令设置一个 React 项目：
1
npx create-react-app project-name
然后，通过终端窗口打开项目目录，输入 npm install axios 在本地为项目安装 Axios。
2.选择目标API
我们将使用随机用户生成器 API 来获取随机用户信息以在我们的应用程序中使用。
让我们将 Axios 模块添加到我们的应用程序中，方法是将其导入到我们的 App.js 文件中。
1
import axios from axios
随机用户生成器 API 提供了一系列用于创建各种类型数据的选项。您可以查看文档以获取更多信息，但对于本教程，我们将保持简单。
我们想要获取十个不同的用户，我们只需要名字、姓氏和唯一的 ID，这是 React 创建元素列表时所需要的。另外，为了使调用更加具体，我们以国籍选项为例。
下面是我们将调用的 API URL：
https://randomuser.me/api/?results=10&inc=name,registered&nat=fr
请注意，我没有使用 API 中提供的 id 选项，因为它有时会为某些用户返回 null 。因此，为了确保每个用户都有一个唯一的值，我在 API 中包含了 registered 选项。
您可以将其复制并粘贴到浏览器中，您将看到返回的 JSON 格式的数据。
3. 创建应用程序状态
首先，让我们使用 React 中的 useState 挂钩创建状态，以便我们可以存储获取的数据。
在我们的 App 组件中，从 React 导入 useState 钩子，然后创建如下所示的状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React, { useState } from "react";
import axios from "axios";
const App = () => {
const [users, setUsers] = useState([]);
const [store, setStore] = useState([]);
return (
<div>
</div>
);
};
export default App;
在这里你可以看到 users 和 store 状态。一个将用于过滤目的，不会被编辑，另一个将保存将在 DOM 中显示的过滤结果。
4.使用axios获取数据
接下来我们需要做的是创建一个 getUsers 函数来处理数据的获取。在此函数中，我们使用 axios 使用 get 方法从 API 获取数据。
现在，为了在页面加载时显示我们获取的数据，我们将导入一个名为 useEffect 的 React hook，并在其中调用 getUsers 函数。
useEffect 钩子基本上管理功能组件中的副作用，它类似于 React 基于类的组件中使用的 componentDidMount() 生命周期钩子。该钩子接受一个空数组作为第二个参数，以进行副作用清理。
更新 App 组件中的代码，如下所示，以便我们可以在控制台中检查响应数据。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import React, { useState, useEffect } from "react";
const App = () => {
const [users, setUsers] = useState([]);
const [store, setStore] = useState([]);
const getUsers = () => {
axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
.then(response => console.log(response))
};
useEffect(() => {
getUsers();
}, []);
return (
<div>
</div>
);
};
export default App;
当您检查控制台时，您将看到一个对象输出。如果你打开这个对象，里面有另一个对象，名为 data，而在 data 里面，有一个名为 results 的数组。
如果我们想从结果中返回特定值，我们可以更新 axios.get 调用，如下所示：
1
2
axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
.then(response => console.log(response.data.results[0].name.first))
这里我们记录了结果数组中第一个值的名称。
5.处理结果数据
现在让我们使用 JavaScript 内置的 map 方法来迭代数组中的每个元素，并创建一个具有新结构的新 JavaScript 对象数组。
使用以下代码更新您的 getUsers 函数：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const getUsers = () => {
axios
.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
.then((response) => {
const newData = response.data.results.map((result) => ({
name: `${result.name.first} ${result.name.last}`,
id: result.registered
}));
setUsers(newData);
setStore(newData);
})
.catch((error) => {
console.log(error);
});
};
在上面的代码中，我们创建了一个名为 newData 的变量。它存储使用 map 方法查看 response.data.results 数组的结果。在 map 回调中，我们将数组的每个元素引用为 result （注意单数/复数差异）。此外，通过使用数组中每个对象的键值对，我们使用 name 和 id 键值对创建了另一个对象。
一般情况下，在浏览器中查看API调用结果，会看到里面有first和last键值对name对象，但没有全名的键值对。因此，从上面的代码中，我们能够组合 first 和 last 名称，在新的 JavaScript 对象中创建全名。请注意，JSON 和 JavaScript 对象是不同的东西，尽管它们的工作方式基本相同。
然后我们将新的中间数据设置为 setUsers 和 setStore 状态。
6. 通过过滤填充数据存储
过滤的想法非常简单。我们有我们的 store 状态，它始终保持原始数据不变。然后，通过在该状态上使用 filter 函数，我们只获取匹配的元素，然后将它们分配给 users 状态。
1
2
const filteredData = store.filter((item) => (
item.name.toLowerCase().includes(event.target.value.toLowerCase()))
filter 方法需要一个函数作为参数，该函数针对数组中的每个元素运行。这里我们将数组中的每个元素称为 item。然后，我们获取每个 item 的 name 键并将其转换为小写，以使我们的过滤功能不区分大小写。
获得 item 的 name 键后，我们检查该键是否包含我们输入的搜索字符串。 includes 是另一个内置 JavaScript 方法。我们将在输入字段中键入的搜索字符串作为参数传递给 includes，如果该字符串包含在调用它的变量中，则它会返回。同样，我们将输入字符串转换为小写，这样无论您输入大写还是小写输入都无关紧要。
最后，filter方法返回匹配的元素。因此，我们只需将这些元素存储在 setUsers 状态中即可。
使用我们创建的函数的最终版本更新 App 组件。
1
2
3
4
5
6
const filterNames = (event) => {
const filteredData = store.filter((item) =>
item.name.toLowerCase().includes(event.target.value.toLowerCase())
);
setUsers(filteredData);
};
7. 创建组件
尽管对于这个小示例，我们可以将所有内容放入 App 组件中，但让我们利用 React 并制作一些小型功能组件。
让我们向应用程序添加几个组件。首先，我们从单独的 JavaScript 文件导入组件（我们将很快定义这些文件）：
1
2
import Lists from "./components/Lists";
import SearchBar from "./components/SearchBar";
接下来，我们更新应用程序组件的 return 语句以使用这些组件：
1
2
3
4
5
6
return (
<div classname="Card">
<div classname="header">NAME LIST</div>
<searchbar searchfunction="{filterNames}"></searchbar><lists usernames="{users}"></lists>
</div>
);
目前，我们将只关注功能。稍后我将提供我创建的 CSS 文件。
请注意，我们有 searchFunction 属性用于 SearchBar 组件，以及 usernames 属性用于 Lists 组件.
另请注意，我们使用 users 状态而不是 store 状态来显示数据，因为 users 状态包含已过滤的数据结果。
SearchBar 组件
这个组件非常简单。它仅将 filterNames 函数作为 prop，并在输入字段更改时调用该函数。将以下代码放入 components/SearchBar.js 中：
1
2
3
4
5
6
7
8
9
10
11
import React from react;
const SearchBar = ({ searchFunction}) => {
return (
<div>
<input classname="searchBar" type="search" onchange="{searchFunction}">
</div>
)
};
export default SearchBar;
列表组件
该组件将简单地列出用户的姓名。这位于 components/List.js 中：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from react;
const Lists = ({ usernames }) => {
return (
<div>
<ul>
{usernames.map(username => (
<li key="{username.id}">{username.name}</li>
))}
</ul>
</div>
)
};
export default Lists;
在这里，我们再次使用 map 方法来获取数组中的每个项目，并从中创建一个
项目。请注意，当您使用 map 创建项目列表时，您需要使用 key 以便 React 跟踪每个列表项目。8.跟踪加载状态
让我们使用 useState 挂钩创建一个加载状态，以显示何时尚未获取数据。
1
const [loading, setLoading] = useState(false);
接下来，我们将更新数据获取方法中的加载状态。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const getUsers = () => {
axios.get("https://randomuser.me/api/?results=10&inc=name,registered&nat=fr")
.then((response) => {
const newData = response.data.results.map((result) => ({
name: `${result.name.first} ${result.name.first}`,
id: result.registered,
}));
setLoading(true);
setUsers(newData);
setStore(newData);
})
.catch((error) => {
console.log(error);
});
};
在这里，我们创建了一个 loading 状态并将其初始设置为 false。然后我们在使用 setLoading 状态获取数据时将此状态设置为 true。
最后，我们将更新 return 语句以呈现加载状态。
1
2
3
4
5
6
7
8
9
10
11
12
return (
{loading ? (
<div classname="Card">
<div classname="header">NAME LIST</div>
<searchbar searchfunction="{filterNames}"></searchbar><lists users="{users}"></lists>
</div>
) : (
<div classname="loader"></div>
)}
>
);
使用 JavaScript 三元运算符，我们在加载状态为 false 时有条件地渲染 SearchBar 和 Lists 组件，然后在加载状态为 true 时渲染加载程序。另外，我们创建了一个简单的加载器来在界面中显示加载状态。
9. 添加一些 CSS 进行样式设置
您可以在下面找到特定于此示例的 CSS 文件。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
body,
html {
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
font-family: "Raleway", sans-serif;
-webkit-text-size-adjust: 100%;
}
body {
display: flex;
justify-content: center;
font-size: 1rem/16;
margin-top: 50px;
}
li,
ul {
list-style: none;
margin: 0;
padding: 0;
}
ul {
margin-top: 10px;
}
li {
font-size: 0.8rem;
margin-bottom: 8px;
text-align: center;
color: #959595;
}
li:last-of-type {
margin-bottom: 50px;
}
.Card {
font-size: 1.5rem;
font-weight: bold;
display: flex;
flex-direction: column;
align-items: center;
width: 200px;
border-radius: 10px;
background-color: white;
box-shadow: 0 5px 3px 0 #ebebeb;
}
.header {
position: relative;
font-size: 20px;
margin: 12px 0;
color: #575757;
}
.header::after {
content: "";
position: absolute;
left: -50%;
bottom: -10px;
width: 200%;
height: 1px;
background-color: #f1f1f1;
}
.searchBar {
text-align: center;
margin: 5px 0;
border: 1px solid #c4c4c4;
height: 20px;
color: #575757;
border-radius: 3px;
}
.searchBar:focus {
outline-width: 0;
}
.searchBar::placeholder {
color: #dadada;
}
.loader {
border: 15px solid #ccc;
border-top: 15px solid #add8e6;
border-bottom: 15px solid #add8e6;
border-radius: 50%;
width: 80px;
height: 80px;
animation: rotate 2s linear infinite;
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
结论
在本教程中，我们使用随机用户生成器 API 作为随机数据源。然后，我们从 API 端点获取数据，并使用 map 方法在新的 JavaScript 对象中重构结果。
接下来是使用 filter 和 includes 方法创建过滤函数。最后，我们创建了两个不同的组件，并在尚未获取数据时有条件地以加载状态渲染我们的组件。
在过去的几年里，React 越来越受欢迎。事实上，我们在 Envato Market 中有许多项目可供购买、审查、实施等。如果您正在寻找有关 React 的其他资源，请随时查看它们。
以上就是React 和 Axios：API 调用初学者指南的详细内容，更多请关注php中文网其它相关文章！