React--使用axios请求数据并把数据渲染到组件

最新推荐文章于 2023-07-15 11:36:07 发布
VIP文章 最新推荐文章于 2023-07-15 11:36:07 发布
阅读量5.1k 收藏 16
点赞数 4
分类专栏： react 文章标签： React axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42442713/article/details/88559861
版权

开始这个实例之前需要对es6、react、axios有一定的了解

安装一个react项目的脚手架 create react-app

在开始之前，你可能需要安装 yarn。

$ yarn create react-app antd-demo

工具会自动初始化一个脚手架并安装 React 项目的各种必要依赖，如果在过程中出现网络问题，请尝试配置代理或使用其他 npm registry。

然后我们进入项目并启动。

$ cd antd-demo
$ yarn start

此时浏览器会访问 http://localhost:3000/ ，看到 Welcome to React 的界面就算成功了。

想了解create react-app脚手架结合antd使用的可以访问这个地址：

https://ant.design/docs/react/use-with-create-react-app-cn

在前端开发的时候，需要获取后台的数据，并把数据渲染到组件展示给用户看，那么这个过程如何实现呢

一般的思路是请求后端提供的接口数据，再把数据渲染出来。

下面一个实例展示：

上图我打算分为两个部分来写，第一个部分就是红色的表格头，固定的内容，一个是绿色的数据表格行，把他抽成一个组件的形式来渲染数据，而这些数据呢，我打算用https://www.mockapi.io来模拟真实数据了，也就是说模拟后端提供的接口数据，如果没用过mockapi的话也可以上网查一下。
大家也可以用这个数据接口：https://5b5e71c98e9f160014b88cc9.mockapi.io/api/v1/lists

接口的数据大概这样子&

最低0.47元/天 解锁文章
一下子就醒了
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
use-axios-request:使用适用于axios的React Hooks轻松获取数据！
05-14
熟悉的API，引擎盖下的axios 请求自动取消（并发请求或卸载组件时） 快取轮询渲染类似道具的API 完全键入（TS，流程即将来临） 回调（ onSuccess ， onError ）以获取状态正在安装使用npm：$ npm install use-axios...
这⼀次彻底弄懂：React 服务端渲染
SOHU_TECH的博客
06-23 2384
本文字数：21279字预计阅读时间：54分钟1、前言在前端项目需要首屏渲染速度优化或SEO的场景下，大家或多或少都听过到过服务端渲染( SSR )，但大多数人对服务端渲染具体实现和底层原理还是比较陌生的。本文基于公司官网开发时做了服务端渲染改造基础上，系统理解和梳理这套体系的模式和逻辑，并写了一些笔记和Demo(文后链接)便于深入理解。这次我们来以React为例，把服务端渲染彻底讲弄明白。本文主...
【React】知识点归纳：react中使用axios获取后台服务器数据
Dream_Lee的博客
01-28 2353
React-Ajax: react中使用axios获取后台服务器数据，所有的数据请求统一写到一个文档里面 react项目中获取数据的工具比较多，比如fetch 、axios, 这2个应该是使用最多的。 在练习的时候遇到一个问题：就是将所有的数据请求统一写到一个文档里面，比如get-api.js 目的就是后期的维护，方便修改。但是axios 获取到的数据是无法return出去的 所以我的实现方案...
React学习（五）——向服务器请求数据并显示
热门推荐
daxiazouyizou的博客
04-01 3万+
    大家好，我是凯文，本篇文章主要内容是如何在React项目中向后台服务器请求数据，然后将数据解析并显示。    本文中涉及到的技术包括：node.js/express服务器的搭建、fetch发送数据请求。    在之前的几篇文章中，介绍了如何搭建基础的React项目，以及一些简单知识，现在，我们还需要掌握如何用React来向后台服务器发起HTTP请求，来获取数据。因为一个网站光有静态的页面是...
react-ajax请求后台数据方法
pinganaaa的博客
04-18 1848
react-ajax axios 方法一：在package.json中配置 "proxy":"http://localhost:5000" 这样localhost:5000就是我们要代理到的服务器 getStudentData = () => { axios.get('/students').then( (result) => { console.log(result.data); }, (reason) => { console.log(re
React使用axios请求后端数据并渲染到页面上
liulang68的博客
11-26 3674
import React from "react"; import axios from "axios"; import Network2 from "./Network2" class Network extends React.Component { constructor(props) { super(props); this.state = { newslist:[] }; } componentDidMount() { /* H
React使用axios请求并渲染数据
baocuan8515的博客
08-13 931
一、什么是axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 二、axios的安装 1、在项目根目录终端引入： npm isntall --save axios 2、在使用 axios 的 js 文件中加入： import axios from 'axios'; ...
react-use-api：axios的异步HTTP请求数据。 专为各种UI状态，SSR和数据预缓存而设计
02-03
react-use-api在SSR（服务器端渲染）时将API数据馈送到React组件，并将数据缓存到前端。 react-use-api使您的代码在两侧之间保持一致，并且还支持应用程序的各种UI状态。 TypeScript支持 线程安全的SSR 安装 :red...
tutorial-react-router-axios:教程Cognox react react-router axios
05-17
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。 目录 更改页面<title> 安装依赖项 导入组件 ...使用public文件夹 ...将数据从服务器注入
axios-react:React基于Axios的React的HTTP客户端组件
05-19
Axios React 用于带有子函数回调的React的HTTP客户端组件，可基于在渲染中创建异步请求。安装： 纱： $ yarn add axios-react npm： $ npm i -S axios-react现场示例：用法： import React from 'react' ;import ...
luizalabs-front-end：使用React构建的单页应用程序，可通过CEP搜索地点并将其保存到收藏夹
01-31
使用React构建的单页应用程序，可通过CEP搜索地点并将其保存到收藏夹。 该应用程序很简单，但是使用了前端开发的高级技术，例如SPA导航，状态管理，单元测试，集成测试，持续集成，连续部署，SASS，可伸缩文件夹结构...
react通过axios请求数据,用一个bol来判断数据是否加载完成后，渲染在页面上，不用async await和定时器的更好方法
weixin_43353869的博客
07-16 541
在utils新建一个axios.js文件,封装axios的请求 import axios from 'axios' // http://localhost:8888/https://cnodejs.org' let baseURL = 'http://localhost:8089/' // 本地服务器注意端口号,要不然报错 // https://cnodejs.org/api/v1 // 创建axios实例 const fetch = axios.create({ baseURL: baseU
react 获取后台数据渲染页面不显示
枯叶的博客
01-13 6048
问题描述： 想要的结果：在一个 react 的 Component 获取后台的数据并显示，页面第一次渲染时就显示 进行的尝试：在组件外定义了一个 getXXX 方法，使用 axios 请求后台的结果，在 Component 的构造方法里调用该方法，将该方法的结果赋值给 state 属性里 bug结果： 后台数据接收到了请求，并正确返回结果，但是页面却没有渲染，使用 console 输...
React通过axios拿到数据后，使用hooks，通过map函数对列表进行渲染
m0_56986233的博客
04-28 1601
导入hooks，导入你封装的http模块，引入样式 import React, { useEffect, useState } from 'react' import {http} from '@/API/' import './index.scss' 默认导出一个函数组价，并使用hooks对数据进行渲染 const [askList,setAskLike] = useState([]) useEffect(()=>{ const getAskList = async ()=>
在react中使用接口请求的方式
最新发布
Liu_G_Q的博客
07-15 6997
在 React 中使用接口进行数据交互是构建现代 Web 应用的关键。本文介绍了在 React 中使用 Fetch API、第三方库和 Hooks 进行接口调用的方法。同时，我们还了解了数据处理和展示的一些最佳实践。掌握这些技巧，你将能够在 React 应用中有效地进行数据交互，并构建出功能强大的用户界面。希望本文为你提供了有关在 React 中使用接口的指导和启示。祝你在学习和实践中取得进步！
React：六、axios请求接口
a232884c的博客
07-10 3282
1 前言vue和react均可使用axios进行接口数据请求。axios官网文档地址： React项目，先执行如下命令安装axios库： 2 使用2.1 接口准备编写react前，先准备好请求接口，如下搭建起水果查询接口：mapper文件： 测试数据如下：controller： 配置文件中的url注意时区问题：serverTimezone改为中国时区Asia/Shanghai，如果是serverTimezone=UTC，那么接口返回json数据中，时间会增加8小时（因为若服务器时区为UTC，那么中国时间为东
React+axios实现数据获取并渲染
进阶的博客
10-22 2832
在网页中通过<script>标签直接使用axios，需要添加标签： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> 其他具体axios用法，见官方文档：axios中文文档|axios中文网 Demo1：（刚打开页面时获取数据并将其渲染到指定位置，这里使用的GET方式） 关键点： 1）使用react中的类组件 2）在类组件中通过componentDidMount(){}获.
如何使用react中axios获取数据
mini74的博客
03-19 987
准备工作 下载axiosnpm install axios --save 然后在需要调用数据的地方引入import axios from 'axios'; 正式开始 我需要让dispatch派发action给store，告诉store我需要干什么！（这里我通过getList()方法） const mapDispatchToProps = (dispatch) =>{ retu...
react如何获取后台数据
m0_72759446的博客
05-18 807
react获取后台数据需要导入useEffect，不然写入接口就会一直重复触发，不断获取接口。效果：解决方法：首先导入。
react hooks请求数据并渲染到页面示例
05-19
好的，下面是一个使用React Hooks来请求数据并渲染到页面的示例代码： ``` import React, { useState, useEffect } from 'react'; import axios from 'axios'; const ExampleComponent = () => { const [data, setData] = useState([]); useEffect(() => { const fetchData = async () => { const result = await axios( 'https://jsonplaceholder.typicode.com/posts', ); setData(result.data); }; fetchData(); }, []); return ( <div> <h1>Example Component</h1> <ul> {data.map(item => ( <li key={item.id}>{item.title}</li> ))} </ul> </div> ); }; export default ExampleComponent; ``` 在这个示例中，我们使用了React Hooks中的useState和useEffect。useState用于存储从API获取的数据，而useEffect用于在组件挂载时调用API并更新数据。 在useEffect中，我们定义了一个名为fetchData的异步函数，它使用axios来获取数据。然后，我们调用setData来更新状态中的数据。 最后，在组件的返回值中，我们使用map函数来遍历数据，并将每个条目呈现为一个列表项。 这就是一个简单的React Hooks请求数据并渲染到页面的示例。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值