react-native之SectionList 中state更新，render不重新渲染问题

最新推荐文章于 2021-05-28 12:16:01 发布
最新推荐文章于 2021-05-28 12:16:01 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41815063/article/details/86504845
版权

问题一：react-native之SectionList 中state更新，render不重新渲染问题

 

解决方法：在SectionList 里面加上 extraData={this.state} 就可以了

 

问题二：SectionList 中 renderSectionHeader 里面绑定函数不能传参问题

 

解决方法：在constructor里面加上下面这句话，完美解决this

this.renderSectionHeader = this.renderSectionHeader.bind(this);

 

 

只作为本人笔记，有问题的同学欢迎下方留言。。。，共同商讨进步

 

Component

知命者夏洛特
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
react native 踩坑之 SectionList state更新 不执行render重新渲染页面
aie3296的博客
08-23 299
官方文档中指出 SectionList 本组件继承自PureComponent而非通常的Component，这意味着如果其props在浅比较中是相等的，则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据（包括data属性以及可能用到的父组件的state），如果是一个引用类型（Object或者数组都是引用类型），则需要先修改其引用地址（比如先复制到一个新的O...
React Native 的SectionList的页面数据太多显示不全
LoveEate的博客
01-24 2079
            在做项目的时候碰到，使用SectionList当页面数据太多的时候，页面的数据显示不全的情况，然后去排查了下发现是自己渲染列表的时候没有给其的尾部加个高度，代码如下： <SectionList   ListFooterComponent={<View style={{height:50}}/>}  />...
React 之 state 数据改变页面不更新未重新渲染的 7 种情况 及 解决办法
热门推荐
前端一线搬运工的博客
04-02 5万+
1. 在redux中修改state页面未更新 解决办法: 请检查你的state是不是直接改变原state的, 记住不要直接修改state 原因: reducer 中 state 是引用,在 reducer 中改变 state 是错误的, 虽然 store 里面的 state 是改变了,但是 react - redux 会认为dispatch 前后的 state 没有改变，就不会重新渲染页...
react-native之sectionList 中state更新，render不重新渲染
weixin_41815063的博客
05-28 312
问题一：react-native之SectionList 中state更新，render不重新渲染问题 解决方法：在SectionList 里面加上extraData={this.state}就可以了 ​ 问题二：SectionList 中 renderSectionHeader 里面绑定函数不能传参问题 解决方法：在constructor里面加上下面这句话，完美解决this this.rende...
RN----SectionList实现下拉刷新
RN_David的博客
07-03 583
RN----SectionList实现下拉刷新 首先初始化refreshing为false 然后设置SectionLists里refreshing属性，设置onRedreshing属性 在state中刷新状态为true，在数据拉取成功后将state中refreshing的值设置为false 写的比较潦草：参考链接（大家可以看看这个） 不足之处请大神指点！ ...
React-Native 组件之 Modal的使用详解
08-29
React-Native 组件之 Modal 的使用详解 Modal 组件是 React-Native 中一个非常重要的组件，它可以用来覆盖包含 React Native 根视图的原生视图（如 UIViewController，Activity），用它可以实现遮罩的效果。在实际...
React-Native中使用验证码倒计时的按钮实例代码
08-30
在React-Native应用开发中，有时我们需要实现一个验证码发送功能，其中包括一个倒计时的按钮。这个按钮在用户点击后会触发发送验证码的网络请求，并且在请求期间按钮变为不可用，显示剩余的倒计时时间。当倒计时结束...
react-native-tag-select修改源码的代码.rar
10-24
在React Native开发中，我们经常会遇到需要自定义组件来满足特定需求的情况。"react-native-tag-select" 是一个用于创建可选择、可取消标签的库，它允许用户在应用中实现类似的功能，比如在输入框中添加自定义标签。...
react-native封装插件swiper的使用方法
11-26
react-native-swiper 是一个在React Native环境中用于创建滑动轮播图组件的库，它可以实现类似于iOS和Android原生应用中的轮播效果。这个库提供了丰富的功能，包括但不限于自动轮播、滑动指示器（小圆点）、手势操作...
react-native中ListView组件点击跳转的方法示例
08-29
在React Native中，ListView是一个非常重要的组件，它用于展示大量可滚动的数据列表。这个组件能够高效地渲染数据，尤其在处理大数据集时，通过优化内存使用和只渲染可视区域的内容来提升性能。在实际开发中，我们...
验证码点击不刷新，render和renderPartial的区别
songtaiwu的博客
03-05 191
后台登陆调用验证码，点击验证码不刷新，没有反应（所有验证码配置，参数都是正确的）。找错的时候发现可以刷新验证码的页面比不可以刷新验证码的页面多了一段js代码，用来处理点击验证码刷新的事件。为什么会少了一段代码？原来就是因为控制器分别调用了renderPartial和render. 下面就说说它们的区别。在进行页面输出渲染的时候，render输出父模板的内容，将渲染的内容，嵌入父模板。renderP...
ReactNative SectionList state更新,视图不更新的问题
学习笔记666
08-25 807
<SectionList renderSectionHeader={this._sectionComp} renderItem={this._renderListRow} sections={this.state.dataBlobSort} e...
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 setState后render没有更新
sinat_34629014的博客
10-19 7832
react setState后render没有更新 #遇到问题后解决的方法 React.Component 把PureComponent 改成Component 备注：React.PureComponent 通过prop和state的浅对比来实现 如果使用了PureComponent 请确保子组件也是PureComponent ...
React setState 时，页面没有渲染出来数据
LoveEate的博客
08-01 9422
具体描述： sate={panes:[]};  const panes=this.state.panes; panes.push({title:"你好",context:"内容"}); this.setState({panes:panes}); 原因：我自己继承了PurComponent 解决办法：1：React.Component                  2:我们setS...
react在修改state中的数组和对象数据的时候（setState）
落落Plus的博客
09-24 1万+
首先在修改状态数据（state）的时候，我们要遵循react的规则,使用setState()方法去修改 此时修改的数据是一个数组或者是一个对象的时候，setState中传递一个对象是不能够满足的，此时就需要给setState中传递函数了！ 此时函数中的参数state就是我们组件中的state数据，可以在方法中把参数中state改变后通过k:v return出来 handlerWorkT...
React-Native解决ListView 在Android手机上无吸顶效果
weixin_30361641的博客
11-01 145
stickySectionHeadersEnabled={true} stickyHeaderIndices={[0]} 转载于:https://www.cnblogs.com/jkr666666/p/9889383.html
react中setState后页面没有重新渲染
weixin_44487623的博客
03-31 3426
react中的删除效果之后setState 没有渲染 在点击删除后，数据已经被splice了，打印出来也是没有的，但是就是没有重新渲染。 原代码： confirm=(i)=>{ const {linkAddress } = this.state; linkAddress.splice(i,1); this.setState({linkAddress}); } 更改后： confirm...
react-native link react-native-pdf zsh: command not found: react-native
最新发布
12-29
要解决"zsh: command not found: react-native"的问题，你需要确保已经正确安装了react-native-cli并且已经将其添加到了系统的环境变量中。 以下是在Windows和Mac上安装和配置react-native-cli的步骤： Windows： 1. 打开命令提示符或PowerShell。 2. 运行以下命令来安装react-native-cli： ``` npm install -g react-native-cli ``` 3. 等待安装完成后，你应该能够在命令提示符或PowerShell中使用react-native命令。 Mac： 1. 打开终端。 2. 运行以下命令来安装react-native-cli： ``` sudo npm install -g react-native-cli ``` 输入你的密码以确认安装。 3. 安装完成后，运行以下命令来查找react-native-cli的安装路径： ``` which react-native ``` 记下这个路径，我们称之为路径A。 4. 打开你的bash配置文件（例如：~/.bash_profile、~/.bashrc、~/.zshrc等）。 5. 在文件末尾添加以下行： ``` export PATH="$PATH:路径A" ``` 将路径A替换为你在步骤3中记录的路径。 6. 保存并关闭文件。 7. 在终端中运行以下命令来使配置生效： ``` source ~/.bash_profile ``` 如果你使用的是其他bash配置文件，请相应地修改命令。 完成上述步骤后，你应该能够在终端中使用react-native命令了。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值