如何在React中从API中获取数据并在表格中显示
React是一个流行的Javascript库，用于构建用户界面。
React项目需要与世界数据交互。我们可以通过获取 API 来访问这些数据。
在本教程中，我们将学习如何从API获取数据并在React js中的表格中显示数据。
API：
API是Application Programming Interface的缩写。
它是一组允许应用程序相互通信的功能和协议。
API 帮助程序员以一种有效的方式开发他们的软件程序。
对于数据，我们需要使用 API 端点从中获取数据。
比如：
请求api:
https://www.zongscan/api/products
返回json数据：
{"page":1,"per_page":6,"total":12,"total_pages":2,"data":[{"id":1,"name":"cerulean","year":2000,"color":"#98B2D1","pantone_value":"15-4020"},{"id":2,"name":"fuchsia rose","year":2001,"color":"#C74375","pantone_value":"17-2031"},{"id":3,"name":"true red","year":2002,"color":"#BF1932","pantone_value":"19-1664"},{"id":4,"name":"aqua sky","year":2003,"color":"#7BC4C4","pantone_value":"14-4811"},{"id":5,"name":"tigerlily","year":2004,"color":"#E2583E","pantone_value":"17-1456"},{"id":6,"name":"blue turquoise","year":2005,"color":"#53B0AE","pantone_value":"15-5217"}],"support":{"url":"https://www.zongscan/#support-heading","text":"To keep ReqRes free, contributions towards server costs are appreciated!"}}
1.使用内置的fetch API获取数据。
我们可以使用该fetch()方法从 API 中获取数据。
我们只需要包含我们想要发出请求的端点。
这是从API获取数据的示例：
import { useEffect, useState } from "react";
import "./App.css";
function App() {
const [products, setProducts] = useState([]);
const fetchData = () => {
fetch("https://reqres.in/api/products")
.then((res) => res.json())
.then(({data}) => setProducts(data));
};
useEffect(() => {
fetchData();
}, []);
return (
<div className="App">
<table style={{ width: "100%" }}>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Year</th>
<th>Pantone Value</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr>
<td>{product.id}</td>
<td>{product.name}</td>
<td>{product.year}</td>
<td>{product.pantone_value}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;
在上面的代码中。
我们使用useEffect 钩子，它会在组件挂载时调用。
useEffect 在我们调用的钩子里面fetchData()。
在fetchData 函数中，我们调用 API 并获取数据并将数据设置为状态。
然后第一个用于返回结果的 json 对象，第二个用于打印。我希望这能帮到您。
当您使用api并做出反应时，一件重要的事情是您可以使用console.log（很多东西都在那里，但对 console.log 非常熟悉）它有助于您找到哪些类型的数据，这应该会有所帮助为你。
ps:
React中的函数式组件和类组件详解
https://www.zongscan.com/demo333/95995.html
2.使用Axios在React中获取数据
Axios是一个用于发出HTTP请求和进行API调用的库。
它是基于承诺的。它很容易使用和理解。
它与javascript的fetch方法相同。
我们不需要将响应转换为JSON并使用第一个.then。Axios直接获取数据并返回结果的JSON对象。
使用axios的好处是，它有额外的功能，如取消请求和重试请求。
Axios也是异步的。
首先，让我们使用以下命令安装axios。
npm install axios 或者，yarn add axios
import axios from "axios";
import { useEffect, useState } from "react";
import "./App.css";
function App() {
const [products, setProducts] = useState([]);
const usingAxios = () => {
axios.get("https://reqres.in/api/products").then((response) => {
setProducts(response.data.data);
});
};
useEffect(() => {
usingAxios();
}, []);
return (
<div className="App">
<table style={{ width: "100%" }}>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Year</th>
<th>Pantone Value</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr>
<td>{product.id}</td>
<td>{product.name}</td>
<td>{product.year}</td>
<td>{product.pantone_value}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;3.在React中使用async/await语法获取数据
Async/Await使我们能够移除我们的.then()回调，并简单地取回我们异步解决的数据。
请确保你不要在useEffect钩子里面使用async/await。
import axios from "axios";
import { useEffect, useState } from "react";
import "./App.css";
function App() {
const [products, setProducts] = useState([]);
const usingAxiosAsync = async () => {
const response = await axios.get("https://reqres.in/api/products");
setProducts(response.data.data);
};
useEffect(() => {
usingAxiosAsync();
}, []);
return (
<div className="App">
<table style={{ width: "100%" }}>
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Year</th>
<th>Pantone Value</th>
</tr>
</thead>
<tbody>
{products.map((product) => (
<tr>
<td>{product.id}</td>
<td>{product.name}</td>
<td>{product.year}</td>
<td>{product.pantone_value}</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
export default App;上述代码的输出效果：
还有，当我们在浏览器中运行这段代码时，我们得到这样的警告
这只是意味着我们没有添加唯一的密钥，所以我们将在代码中添加密钥，
以下是示例代码
<tbody>
{products.map((product) => (
<tr key={product.id}>
<td>{product.id}</td>
<td>{product.name}</td>
<td>{product.year}</td>
<td>{product.pantone_value}</td>
</tr>
))}
</tbody>
相关文章