react进入页面第一次渲染——fetch数据还没获取

最新推荐文章于 2023-08-02 18:38:27 发布
最新推荐文章于 2023-08-02 18:38:27 发布
阅读量1w 收藏 3
点赞数 3
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Tracy_frog/article/details/80496374
版权

第一次进入到页面的时候，因为需要去fetch数据，所以会在没数据的情况下有一次渲染，等fetch成功后，会再一次进行渲染。

这样会导致出错

可以在state中加一个isLoading


Astar_小白的成长之路
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react网络请求数据初始为空影响页面渲染的解决
m0_46313328的博客
07-21 1625
发送网络请求获取的数据，初始是空的 useEffect(() => { dispatch({ type:'data/fetchData', payload:null }) },[]) 如做Table表格，直接把数据赋给dataSource，组件渲染比较快，此时渲染的数据是空的，直接报错 <Table dataSource={data.list} columns={columns} /> 可先对数据进行判断，数据不为空时赋数据值，否则先给dat
react-fetch-flow:一个在页面加载时获取初始数据的框架
05-01
React Fetch Flow是一个高阶组件（HOC），中间件和一个简单的reducer，负责处理或设置加载状态，客户端路由行为（与加载有关）和数据获取。 它遵循一种使用户实现简单直观的理念。 这种哲学是用户在整个应用程序中...
react 关于this.setState使用时，第一次无法获取数据，第二次获取的数据是第一次触发的疑问...
weixin_34111819的博客
09-19 2312
我使用的是antd组件， compareClickFn(orderCodes, fileNames) { printLog("orderCodes----------"+ orderCodes); printLog("fileNames----------"+ fileNames); this.setState({ show: !this.st...
解决前端组件渲染没更新数据问题
CSNZのBlog
02-03 2542
使用前端日期控件时 - 数据联动时数据绑定无效问题。
[React]页面第一次渲染，请求还没有拿到数据，页面可能会报undefined
qq_41786057的博客
08-02 877
如题，在useEffect中发请求，拿数据，渲染页面，一套操作行云流水。结果一刷新，噶，报undefined了，渲染列表是空的。此时会发现，除了刷新，进行其他影响页面的操作，致使页面第二次渲染，就会拿到数据，页面也就正常显示了。解决思路：render列表或组件前加个loading状态，设置初始值为true，数据为空时显示loading，获取数据后更改为false，渲染列表或组件。问题出现的原因就在于第一次render时，数据列表是空的。
Background Fetch
夏树正茂的专栏
10-29 1938
Background Fetch 是iOS7带来的非常Cool的新特性，开启Background Fetch的App会被系统在合适的时机执行后台任务的代码。比如这个场景：你每天晚上10点会通过自己的RSS阅读器App来阅读，系统可能会在10点之前执行App中设定的下载RSS最新资源的任务，当你打开RSS阅读器App的时候就显示出最新的内容。实现Background Fetch的步骤也是非常的简单，
fetch-initial-data:react服务端渲染首次获取数据，首屏数据
05-18
react服务端渲染首次获取数据安装npm install --save fetch-initial-data使用演示需要首次加载的组件import {bindActionCreators} from 'redux';class Home extends Component{ constructor(props){ super(props) //...
react-fetch：用于获取数据的React组件
02-04
ReactFetch用于获取数据的React组件npm i @kne/react-fetch使用示例import Fetch ,{ useFetch , useFetchAll , withFetch , withFetchAll , createWithFetch , createWithFetchAll , preset} from ' @kne/react-...
详解如何使用React Hooks请求数据并渲染
01-18
前言 在日常的开发中，从服务器端异步获取数据并渲染是相当高频的操作。...本文将会介绍如何使用React的新特性Hook来编写组件并获取数据渲染。 数据渲染 先来看一个数据渲染的简单demo import Reac
react-fetch-component：React组件以声明方式获取数据
02-24
React获取组件 React组件以声明方式数据安装yarn add react-fetch-component或者npm install --save react-fetch-component用法您提供单个函数作为<Fetch>的子代，该子代将单个参数作为对象接收。 每当获取请求的...
React中获取数据的3种方法及优缺点
10-15
在React开发中，获取数据是构建动态用户界面的关键步骤。本文将详细讲解三种在React中获取数据的方法，包括使用生命周期方法、Hooks以及Suspense，并分析它们的优缺点，以帮助开发者更好地理解和应用。 1. 使用生命...
react pro——————————
04-14
react pro——————————
react-ReactVirtuoso是一个简单易用的React组件用于渲染庞大的数据列表
08-15
传统的渲染方式可能会导致性能问题，因为React会一次性渲染整个列表，消耗大量的内存和CPU资源。为了解决这个问题，React Virtuoso应运而生。 React Virtuoso的核心原理是虚拟化，也称为列表虚拟化或滚动虚拟化。它...
React 全自动数据表格组件——BodeGrid的实现思路
12-12
想想我们最开始写新增编辑页面是怎么做的，是不是一个页面一个页面的写，然后要么表单提交要么Ajax提交。后台有无数个新增和编辑的视图页，现在想想真是恐怖啊，看着都累。后面接触到kendoui的grid组件，看到只需要...
12 React 获取数据 axios插件 fetch-jsonp插件的使用
最新发布
03-01
本教程主要讲解了如何在React应用中利用axios和fetch-jsonp这两个插件来获取远程数据。以下是详细的知识点解析： 1. **React状态管理**：React应用中的数据通常存储在组件的状态（state）中，当需要从服务器获取...
react请求数据渲染报错
kyyius的博客
04-21 854
情景: 请求数据，然后map循环，报错，说没有map方法 原因: 把map部分注释掉后，查看返回的数据。数据没有问题，说明是异步的问题。 思路: 我们没有确确实实拿到数据，就渲染，报错也正常 那么我们就要保证数据拿到手了，渲染到页面上。 HOOKS 例子 // 方案一 // 请求的数据结构{result: Array(20)} // 没有map方法，那我们就让它有 // 初始化数据{a: 11,result: []}, a只是演示如何把它保留下来 // a相当于原始数据中的flag之类的东西 impo
react中fetch获取数据的问题-----VM
pugongyingyangyue的博客
09-15 3358
constructor(){ super(); this.state={ data:null } } fetchData(){ fetch('src/video_wall_test.json') .then((response) =>{ if(response.status===200){ response.json().then((res
APNS和Background Fetch相关问题总结
pwf2006的博客
05-19 2514
APNS和Background Fetch相关问题总结 1.1 Normal Push Notification1.1.1 概述1.1.2 deviceToken相关1.1.3 推送feedback接口1.1.4 badge点击不消失的问题1.1.5 定制push notification的推送时间段1.1.6 push notification的功能扩展1.1.7 收不到push notification的情况总结1.1.8 测试工具1.2 Silent Push Notification1.2.1 概述
react实现进入页面自动向后端获取数据
05-30
你可以在React组件的生命周期方法componentDidMount()中向后端发起数据请求。这个方法会在组件挂载完成后自动调用，所以可以在这里执行你的数据请求操作。你可以使用`fetch`或`axios`等库发起HTTP请求，获取数据后再通过`setState`更新组件的状态，从而触发重新渲染。以下是一个简单的示例代码： ```javascript import React, { Component } from 'react'; import axios from 'axios'; class MyComponent extends Component { constructor(props) { super(props); this.state = { data: null }; } componentDidMount() { axios.get('/api/data') .then(response => { this.setState({ data: response.data }); }) .catch(error => { console.error(error); }); } render() { const { data } = this.state; return ( <div> {data ? ( <ul> {data.map(item => ( <li key={item.id}> {item.name} </li> ))} </ul> ) : ( <p>Loading...</p> )} </div> ); } } export default MyComponent; ``` 这个例子中，我们在组件挂载完成后发起一个GET请求，获取数据后更新组件的状态。在渲染过程中，我们根据状态值来渲染相应的UI。在数据还没加载完成时，我们显示一个loading提示。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值