React Native state flatlist更新不及时

最新推荐文章于 2024-05-14 02:55:11 发布
最新推荐文章于 2024-05-14 02:55:11 发布
阅读量679 收藏
点赞数
分类专栏： React Native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sinat_33758988/article/details/88578219
版权

不知道是React Native的第几篇了
今天做评价功能意外发现页面不好好更新，state里的数据已经更新了但是页面并没有更新到最新的状态
找了好几个办法都没什么用，最后https://www.cnblogs.com/yang-shun/p/8818715.html这个办法有效
但是不知道是怎么原理，还没搜到

Shantel Wong
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react native基于FlatList下拉刷新上拉加载实现代码示例
10-17
在React Native中，`FlatList` 是一个非常重要的组件，用于渲染长列表数据，它具有高性能和优化的特性。在本示例中，我们将探讨如何使用`FlatList`实现下拉刷新和上拉加载功能。 首先，`FlatList` 提供了内置的`...
React Native 瀑布流列表
07-05
4. **数据绑定与渲染**：在React Native中，数据绑定是通过state和props实现的。开发者需要将数据源映射到MasonryList组件的data属性，并提供一个renderItem函数，用于根据每一项数据生成对应的视图。这样，当数据...
react-native flatlist setState修改数据视图不刷新解决方案
weixin_30571465的博客
12-14 1061
给flatlist添加属性：handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems)} 转载于:https://www.cnblogs.com/yang-shun/p/8818715.html
react native FlatList内嵌自己的Component不刷新的处理
weixin_33849215的博客
06-03 626
问题描述： 原先列表里头有多个自定义标签，部分是放到FlatList所在类里头的，内部class, 当列表刷新，元素数量变化时，没有影响。 但其中有一个自定义组件包含state 最后造成，元素个数变化后，异步先按顺序获取这个组件旧的虚拟Dom,造成新的Flatlist元素渲染时，对应包含的自定义组件没有重新创建而是用旧的遍历返回对应的旧虚拟节点。 最后的实现方式如下：也就是实现显示'更多'的效果 ...
2024年HarmonyOS鸿蒙最新2022 年 React Native 的全新架构更新_reactnative新架构(2)，2024年最新大厂面试需要准备几个月
最新发布
2401_84871072的博客
05-14 1593
随着 RN 团队关于在 RN 里 JS 线程和 Native 线程之前是通过bridge来交互，而交互的数据必须被转化为 JSON，而这个桥只能处理异步通信。JavaScript 引擎，React Native 用它执行 JS 代码；Yoga：布局引擎，计算UI位置；
react-native flatlist setState修改数据视图不刷新解决方案
weixin_46020146的博客
05-22 505
react-native flatlist setState修改数据视图不刷新解决方案
ReactNative FlatList state更新，视图不更新的问题
从心的博客
11-10 8043
官方文档给出 本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然
react-native之sectionList 中state更新，render不重新渲染
weixin_41815063的博客
05-28 313
问题一：react-native之SectionList 中state更新，render不重新渲染问题 解决方法：在SectionList 里面加上extraData={this.state}就可以了 ​ 问题二：SectionList 中 renderSectionHeader 里面绑定函数不能传参问题 解决方法：在constructor里面加上下面这句话，完美解决this this.rende...
React Native中的RefreshContorl下拉刷新使用
08-29
在React Native中，`RefreshControl`组件是一个非常实用的功能，用于实现下拉刷新的效果，常见于列表视图如`ScrollView`或`FlatList`中。本文将详细介绍如何使用`RefreshControl`进行下拉刷新操作。 首先，我们需要...
react-native-refresh-list-view:基于FlatList的上拉、下拉刷新组件
04-12
react-native-refresh-list-view 一个基于FlatList的列表下拉、上拉刷新控件。代码一共100多行，尽量写得简单易懂，方便各位根据自己的需求随意修改。 如果有bug或建议，欢迎提issue。 截图 下拉刷新 上拉翻页 已...
react native 各自控件 Demo
01-31
React Native 是一个由Facebook开发的开源框架，它允许开发者使用JavaScript和React的组件化思想来构建原生的iOS和Android应用程序。"react native 各自控件 Demo" 指的是一系列关于React Native中各种组件的实际...
RN- Flatlist state更新数据不刷新问题
学习笔记666
10-07 2090
<FlatList keyExtractor={ () => Math.random(2) } data={this.state.goodList} renderItem={this.renderItem} ItemSeparatorComponent={this.separatorCom...
ReactNative 加载网络数据界面卡顿
MusicCannon的博客
05-07 687
ReactNative 在进入新的界面，同时需要在新界面加载网络数据的时候有卡顿的现象，导致界面加载不流畅。本来以为是网络加载完成后再次渲染界面导致的。然后就想了一个办法，延迟加载数据 setTimeout(this._loadData,500) 结果还可以，但是如果有 loadingDialog 之类的东西会有一种延迟的感觉，而且写法感觉也不专业。所以百度科普了一下，ReactNative 里面有个专门管理交互的管理者： InteractionManager 在这个类里面有个方法 ru..
RN：列表组件FlatList以及不触发更新怎么办
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
07-15 1143
对应于原生应用组件，它可能是iOS的TableView，也可能是Android的ListView，RecycleView。 这些组件都有一些共同的特点： 1、视图可滚动。 2、可复用视图模板。 3、视图高度随着数据内容长度的变化而弹性变化。 4、自带性能优化。 ListView 由于一些缺点，已经过时了 FlatList 它是一个扁平化的列表，砍掉了section的支持，同时，增加了很多移动端常用的玩法：支持横向滑动，下拉刷新，separator，ScrollToIndex等。相比ListView，性能上也
FlatList不更新（不重新渲染）问题
book_1992的专栏
05-28 7709
问题：修改了state的某个属性后，重新渲染视图的时候发现FlatList并没有更新原帖：https://segmentfault.com/q/1010000009665332给FlatList指定extraData={this.state}属性，是为了保证state.selected变化时，能够正确触发FlatList的更新。如果不指定此属性，则FlatList不会触发更新，因为它是一个Pure...
react native FlatList 使用详解
热门推荐
老孟Flutter
04-18 4万+
高性能的简单列表组件，支持下面这些常用的功能： 完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持下拉刷新。 支持上拉加载。 如果需要分组/类/区（section），请使用 SectionList属性： ItemSeparatorComponent：分割线组件， ListFooterComponen
react-native项目使用flatList后state值改变，不重新渲染页面的问题
weixin_43795169的博客
03-27 2513
react-native项目使用flatList后state值改变，不重新渲染页面的问题 给FlatList指定extraData={this.state}属性，保证state变化时，能够正确触发FlatList的更新。 <FlatList extraData={this.state} data={this.state.taskList} renderItem={this._renderIt...
react-native flatlist 的进阶使用 （头尾，间隔组件和滚动事件）
卓原的进化之旅
07-04 3万+
0.43之后 RN添加了Flatlist组件，作为ListView的增强版，FlatList有着很强的性能上的优势，而且使用起来也更简单。 最基础的： <FlatList data={[{key: 'a'}, {key: 'b'}]} renderItem={({item}) => Text>{item.key}Text>} /> 最好是给data数据每一个item都添加一个ke
react 中setState状态没有“更新”
pugongyingyangyue的博客
09-11 7644
注意：setState是异步的。 如下的代码，setState之后值仍然没变 constructor(){      super();    this.state= {aaa:'s'}, } componentDidMount(){       console.log(this.state.aaa);//s      this.setState({aaa:'sss'})
react native的FlatList的No Data样式
06-08
React Native 的 FlatList 组件非常强大，但是它默认情况下不提供 No Data 样式。如果你想为 FlatList 添加 No Data 样式，可以按照以下步骤进行： 1. 在 FlatList 组件的父组件中添加一个状态变量 ```javascript const [listData, setListData] = useState([]); ``` 2. 在 FlatList 组件中添加 ListEmptyComponent 属性 ```javascript <FlatList data={listData} renderItem={renderItem} keyExtractor={item => item.id} ListEmptyComponent={<Text style={styles.noDataText}>No data available</Text>} /> ``` 3. 添加 No Data 样式 ```javascript const styles = StyleSheet.create({ noDataText: { textAlign: 'center', marginTop: 20, color: '#999999', fontSize: 16, }, }); ``` 这里的 noDataText 样式可以根据你的需求进行修改，它只是一个示例。 这样，当 FlatList 组件的数据为空时，就会显示 No Data 样式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值