侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 3个月前   273

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;

上述代码的输出效果:

1.png

还有,当我们在浏览器中运行这段代码时,我们得到这样的警告

2.png

这只是意味着我们没有添加唯一的密钥,所以我们将在代码中添加密钥,

以下是示例代码

<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>

  • 上一条:
    React中的函数式组件和类组件详解
    下一条:
    Laravel 9.36版本发布
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 在uniapp开发微信小程序中图片大小显示不正常解决方法(0个评论)
    • 近期文章
    • zongscan祝大家2023元宵节快乐(0个评论)
    • 2023年国内最新注册苹果开发者账号之申请邓白氏编码流程步骤(0个评论)
    • 2023年国内最新注册苹果个人开发者账号及支付会员年费流程步骤(0个评论)
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • Laravel 9.49版本发布(0个评论)
    • 在Laravel应用程序如何减少代码重复编写(0个评论)
    • 在laravel项目中提高安全性方式推荐:CSP内容安全策略(0个评论)
    • 在go语言中从值中获取常量名称代码示例(0个评论)
    • 在go语言中如何通过名称获得结构字段和值代码示例(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客