Loading [MathJax]/jax/input/TeX/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >React Native - FlatList在刷新时不调用renderItem的生命周期方法

React Native - FlatList在刷新时不调用renderItem的生命周期方法
EN

Stack Overflow用户
提问于 2020-01-15 15:14:42
回答 2查看 138关注 0票数 0

我想在每次刷新列表时在renderItemcomponentDidMount方法中发出一个fetch请求,但是FlatList只调用生命周期方法一次。

列表

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<FlatList data={this.state.dataSource}
          renderItem={({item}) => <ListItem imageHref={item.imageHref} />}
          keyExtractor={(item, index) => index.toString()}
          refreshing={this.state.refreshing}
          onRefresh={/* Fetching data from JSON and updating dataSource[] */} />

ListItem组件内部:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
render() {
    return <Image source={this.state.imageSource} />
}

componentDidMount() {
    fetch(this.props.imageHref)
        .then(response => {
            if(response.status !== 200)
                this.setState({imageSource: require('../assets/default-image.png')
            else
                this.setState({imageSource: {uri: this.props.imageHref}});
            }
        });
}

我尝试在render方法中调用fetch,但也不起作用。

基本上,我希望每次刷新列表时imageSource都会更新。请帮帮忙。

EN

回答 2

Stack Overflow用户

发布于 2020-01-15 15:33:09

正因为如此,ListItem没有改变。你必须在onRefresh中获取新的图标,并将其传递到ListItem中,然后当ListView刷新时,所有数据都将更改...如果要在ListItem中执行此操作,则需要与特定项进行一些交互,例如,某个按钮,如果用户按下该按钮,则需要获取和更改图标

票数 0
EN

Stack Overflow用户

发布于 2020-01-15 17:13:38

我不知道您的列表何时刷新,但您可以尝试此this.forceUpdate()您可以在此处了解更多信息force component to re render

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59754338

复制
相关文章
React Native列表之FlatList开发实用教程
在APP开发过程中,列表可谓是页面最重要的一种展现形式了,几乎每一个APP都离不了列表,那么在这篇文章中将向大家分享在React Native中该如何实现列表,以及FlatList的原理和实用指南。
CrazyCodeBoy
2019/12/10
6.6K0
React Native列表之FlatList开发实用教程
React Native组件之FlatList
在过去的一年中React Native经历了从v0.40到v0.52的十几次的版本迭代,可以看到,特别是0.50之后,React Native的组件库在不断地壮大,React Native也正在越来越稳定。
xiangzhihong
2022/11/30
1.2K0
如何优雅的在react-hook中进行网络请求
Hook是在React 16.8.0版本中新加入的特性,同时在React-Native的0.59.0版本及以上进行了支持,使用hook可以不用class的方式的方式使用state,及类似的生命周期特性。
君伟说
2020/10/12
9.4K0
如何优雅的在react-hook中进行网络请求
史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
React Native系列 《逻辑性最强的React Native环境搭建与调试》 《ReactNative开发工具有这一篇足矣》 《解决React Native unable to load
磊哥
2018/05/08
4.6K0
史上最易懂——ReactNative分组列表SectionList使用详情及示例详解
react-native-easy-app 详解与使用之(三) View,Text,Image,Flatlist
react-native-easy-app 是一款为React Native App快速开发提供基础服务的纯JS库(支持 IOS & Android),特别是在从0到1的项目搭建初期,至少可以为开发者减少30%的工作量。
rufeng008
2020/04/11
2.3K0
使用FlatList构建列表
接着上一篇 使用react-native-tab-navigator切换页面 当前首页页面内容是空的,只有一个背景色。下面我们来添加些内容。 这里使用 FlatList 来渲染列表。(注:很多教程包含视频中是使用 ListView 构建内容列表的。这个已经被弃用) 步骤如下图非常简单:
mafeifan
2018/09/10
1.7K0
使用FlatList构建列表
react-native flatlist 上拉加载onEndReached方法频繁触发的问题
问题 在写flatlist复用组件时,调用的时候如果父组件是不定高的组件,会造成组件无法显示 如果父组件样式{flex:1},则会出现下拉方法频繁触发或不正常触发的问题(我这里出现的问题是在列表第6个项目在底部时,缓慢上拉会多次触发flatlist的onEndReached监听) 原因 推测是因为{flex:1}不适合做动态高度组件的父组件样式,会错误的判断高度导致onEndReached多次不正常触发。 解决 可以把列表上方所需的组件做成header属性传入组件当做flatlist的头部组件,这样就可以直
mcq
2018/06/27
3.3K0
react-native布局与组件
一款好的App离不开漂亮的布局,RN中的布局方式采⽤的是FlexBox(弹性布局) 。
一粒小麦
2019/09/17
5.3K0
react-native布局与组件
React Native中FlatList组件不重新渲染Item解决方法
今天在写一个点击TouchableOpacity调用函数重新渲染图表的功能,一开始是点击之后图表可以正常切换但是TouchableOpacity颜色没有变化
henu_Newxc03
2022/05/05
2K0
React Native中FlatList组件不重新渲染Item解决方法
React Native 性能优化指南
2020 年谈 React Native,在日新月异的前端圈,可能算比较另类了。文章动笔之前我也犹豫过,但是想到写技术文章又不是赶时髦,啥新潮写啥,所以还是动笔写了这篇 React Native 性能优化的文章。
卤代烃
2020/07/09
5.4K1
webview 和 React Native 中吸顶效果实现
在跨端开发中,离不开一些吸顶的交互场景,可以参考淘宝或是京东类电商 app 中一些 tab ,在整个容器滑动的过程中,吸顶效果非常的连贯和丝滑的,当然这些 tab 可能是用 native 开发的,但是跨端应用也能实现很不错的吸顶效果,那么今天我们就来研究一下跨端开发是如何实现吸顶的。
用户6835371
2022/09/21
3.1K0
webview 和 React Native 中吸顶效果实现
React-Native 版高仿淘宝、京东商城首页、商品分类页面
高仿淘宝、京东等商城首页、商品分类页面,正在做商城项目的同学有福啦,看看是你们想要的效果吗?
子晋
2022/01/18
3.1K0
React-Native 版高仿淘宝、京东商城首页、商品分类页面
Rn实现省市区三级联动
省市区三级联动选择是个很频繁的需求,但是查看了市面上很多插件不是太老不维护就是不满足需求,就试着实现一个 这个功能无任何依赖插件 功能略简单,但能实现需求 核心代码也尽力控制在了60行左右 pca-code.json树型数据来源 Administrative-divisions-of-China 下面只贴了省市区选择的功能,全部代码可参考github area分支
明知山
2023/09/01
3400
Rn实现省市区三级联动
React Native 生命周期
         在面向对象编程中,任何对象的存在都会存在生命周期。类似我们iOS 的View,就会有LoadView,ViewWillAppear,ViewDidLoad等等生命周期。RN也不例外,这篇主要学习RN的生命周期,在开发中如果掌握了并熟练的运用生命周期函数的话,往往开发能事半功倍。
星宇大前端
2019/01/15
9920
React Native性能优化:应该做和不应该做的
在使用一些框架例如React Native去实际开发移动端应用的时候,性能是一个重要的问题。React Native默认情况下的性能是没有问题的,但是在实际开发React Native的时候,我们也可能会遇到一些性能相关的问题。
ACK
2021/03/22
4.1K0
Rn使用FlatList导航栏自动回到中间
明知山
2023/10/17
1530
Rn使用FlatList导航栏自动回到中间
React Native组件生命周期
概述 所谓生命周期,就是一个对象从开始生成到最后消亡所经历的状态,理解空间的生命周期,是开发中必须掌握的一个知识点。就像 Android 开发中组件 一样,React Native的组件也有生命周期(
xiangzhihong
2018/02/05
1.2K0
React Native组件生命周期
react native简单入门
只执行一次: constructor、componentWillMount、componentDidMount 执行多次:render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate 有条件的执行:componentWillUnmount(页面离开,组件销毁时) 不执行的:根组件(ReactDOM.render在DOM上的组件)的componentWillReceiveProps(因为压根没有父组件给传递props)
前端迷
2019/12/05
3.6K0
react native简单入门
FlatList ListView SectionList 下拉刷新 上拉加载 彻底解决
至于 FlatList SectionList 自带的上拉加载功能,根本就是骗人的。
onety码生
2018/11/21
4K0
React Native基础&入门教程:以一个To Do List小例子,看props和state
在上篇中,我们介绍了什么是Flexbox布局,以及如何使用Flexbox布局。还没有看过的小伙伴欢迎回到文章列表点击查看之前的文章了解。
葡萄城控件
2018/08/09
1.6K0
React Native基础&入门教程:以一个To Do List小例子,看props和state

相似问题

React Native |Flatlist& memo |React renderItem不是函数

20

React Native Flatlist在上拉时不刷新数据

18

React-native Flatlist不刷新数据

294

React原生-Flatlist renderItem promise

10

数据更新时多次调用FlatList、renderItem

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文