如何在React中从API中获取数据并在表格中显示

前端  /  管理员 发布于 2年前   864

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>