FlatList不更新（不重新渲染）问题

最新推荐文章于 2022-02-27 21:28:01 发布
最新推荐文章于 2022-02-27 21:28:01 发布
阅读量7.6k 收藏 3
点赞数 1
分类专栏： React Native


问题：修改了state的某个属性后，重新渲染视图的时候发现FlatList并没有更新

原帖：https://segmentfault.com/q/1010000009665332


给FlatList指定extraData={this.state}属性，是为了保证state.selected变化时，能够正确触发FlatList的更新。如果不指定此属性，则FlatList不会触发更新，因为它是一个PureComponent，其props在===比较中没有变化则不会触发更新。
加了这个属性之后就可以了

JoXu
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
RN使用FlatList实现上拉加载更多的代码
weixin_68658847的博客
04-28 151
RN使用FlatList实现上拉加载更多的代码
React native Mobx 数据更新不渲染页面问题
luke312的博客
03-03 1228
React native中Mobx数据更新，页面却不渲染 原因：6.0版本更新后observer注解不会自动更新了 由原来的使用@observable注解变成了使用makeAutoObservable. 解决方法： import { observable,action,makeAutoObservable } from "mobx"; class RootStore{ constructor(){ makeAutoObservable(this) } name;
react-native flatlist setState修改数据视图不刷新解决方案
weixin_30571465的博客
12-14 1059
给flatlist添加属性：handleMethod = {({viewableItems}) => this.handleViewableItemsChanged(viewableItems)} 转载于:https://www.cnblogs.com/yang-shun/p/8818715.html
RN：列表组件FlatList以及不触发更新怎么办
分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等
07-15 1117
对应于原生应用组件，它可能是iOS的TableView，也可能是Android的ListView，RecycleView。 这些组件都有一些共同的特点： 1、视图可滚动。 2、可复用视图模板。 3、视图高度随着数据内容长度的变化而弹性变化。 4、自带性能优化。 ListView 由于一些缺点，已经过时了 FlatList 它是一个扁平化的列表，砍掉了section的支持，同时，增加了很多移动端常用的玩法：支持横向滑动，下拉刷新，separator，ScrollToIndex等。相比ListView，性能上也
RN- Flatlist state更新数据不刷新问题
学习笔记666
10-07 2083
<FlatList keyExtractor={ () => Math.random(2) } data={this.state.goodList} renderItem={this.renderItem} ItemSeparatorComponent={this.separatorCom...
React Native中FlatList组件不重新渲染Item解决方法
ｎｅｗｘｃ
02-27 558
场景 今天在写一个点击TouchableOpacity调用函数重新渲染图表的功能，一开始是点击之后图表可以正常切换但是TouchableOpacity颜色没有变化 解决方法 给FlatList指定extraData={this.state}属性
使用mobx 渲染react-native FlatList控件 观察数据发生变换未重新渲染
weixin_31032491的博客
04-22 914
在这里我们再FlatList中使用了curElement可观察数据，若我们curElement观察数据发生改变后，我们发现FlatList没有重新渲染，这是为什么呢？我们看看官方的解释吧~ 简单明了，我们只要在FlatList中加上extraData属性加上我们renderItem里所用到的对象就可以重新渲染啦~ <FlatList data={curProperty.i...
mobx数据变了，但是没有同步更新到页面？
坚持原创
03-24 1959
可能是mobx和mobx-react版本太高的原因，于是我尝试降低版本，确实，成功了 npm i mobx@5.0 -D npm i mobx-react@5.0 -D 安装完之后重新启动项目，就实现了数据双向绑定的效果 输入框输入的值可以同步到页面 ...
Flatlist实战及爬坑
m0_37194191的博客
11-16 1122
FlatList的实战用法 1.较为全面的案例： &lt;FlatList data={this.state.data} keyExtractor={(item, index) =&gt; index.toString()} renderItem={this._renderView} numColu...
react-native flatlist setState修改数据视图不刷新解决方案
weixin_46020146的博客
05-22 505
react-native flatlist setState修改数据视图不刷新解决方案
flatlist-performance-tips：to改善React Native FlatList性能和内存消耗的提示和技巧
02-05
然而，如果不正确地使用或优化，FlatList可能会导致性能问题和内存消耗过大。以下是一些关于如何改善React Native FlatList性能和内存消耗的提示与技巧： 1. **虚拟化渲染**：FlatList的精髓在于其虚拟化特性，它只...
ReactNative之FlatList的具体使用方法
08-28
FlatList 的出现主要是为了解决 ListView 的一些性能问题。下面，我们将详细介绍 FlatList 的使用方法和其各个属性。 基本使用 使用 FlatList 非常简单，只需要传递数据即可。例如： ```jsx <FlatList data={[{ ...
react native基于FlatList下拉刷新上拉加载实现代码示例
10-17
当数据加载完成后，更新`data`状态以渲染新的列表项，并根据返回的数据量决定是否还有更多数据（`nomore`状态）。 总结来说，这个示例展示了如何在React Native中利用`FlatList`组件的`RefreshControl`和`...
react-native-tree-table::megaphone::megaphone::megaphone:在 FlatList 基础上封装的表格组件，支持树形数据的渲染
05-02
在 FlatList 基础上封装的表格组件，支持树形数据的渲染。 Install npm install react-native-tree-table --save Usage 使用树形结构的数据 import Table from 'react-native-tree-table '; const data2 = [ { ...
react-native-draggable-flatlist:用于React Native的拖放式FlatList
05-12
React本机可拖动FlatList 用于React Native的拖放式FlatList组件。 由和支持的完全本地交互。 要在DraggableFlatList中使用可滑动列表项，请参见 。安装请按照有关和安装说明进行操作。 RNGH要求您对MainActivity....
RN-Flatlist组件，更新数据，数据显示错乱
qq_43033251的博客
09-04 1021
1.需求 从后台回去的数据列表，在Flatlist组件显示，本地根据名称对每一个Item进行模糊查询，数据查询的是对的，但是组件上显示错误 2.原因 可能是由，Flatlist组件渲染机制导致 3.解决 在组件属性中加上：extraData={this.state} <FlatList extraData={this.state} data={deviceAreaList} numColumns={2} keyExtractor={(item, inde
ReactNative FlatList state更新，视图不更新的问题
从心的博客
11-10 8039
官方文档给出 本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的Object或者数组中），然
React Native 组件学习-FlatList
weixin_33947521的博客
11-30 574
高性能的简单列表组件，支持下面这些常用的功能： 完全跨平台。 支持水平布局模式。 行组件显示或隐藏时可配置回调事件。 支持单独的头部组件。 支持单独的尾部组件。 支持自定义行间分隔线。 支持下拉刷新。 支持上拉加载。 支持跳转到指定行（ScrollToIndex）。 如果需要分组/类/区（section），请使用&lt;SectionList&gt;. 一个最简单的例子： &lt;FlatLi...
《ReactNative系列讲义》进阶篇---05.FlatList（二）
fsf_snail的专栏
09-05 4353
| 版权声明：本文为博主原创文章，未经博主允许不得转载。 一、简介 上篇文章中我们了解到了FlatList组件的基本用法，其实FlatList还有很多丰富的功能，可实现更多更灵活的业务需求，接下来让我们一起来看看吧~ 二、基础知识 支持单独的头部文件 // Header布局 _renderHeader = () =&gt; ( &lt;View&gt;&lt;Tex...
FlatList 的参数 extraData的作用是什么
最新发布
03-12
FlatList 的参数 extraData 用于指定 FlatList 组件的更新依赖项，当 ...这个参数通常用于解决 FlatList 组件在某些情况下不更新的问题，例如当 FlatList 渲染的数据源发生变化时，但是 FlatList 并没有重新渲染。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值