react native 踩坑之 SectionList state更新 不执行render重新渲染页面

官方文档中指出

SectionList

  • 本组件继承自PureComponent而非通常的Component,这意味着如果其props浅比较中是相等的,则不会重新渲染。所以请先检查你的renderItem函数所依赖的props数据(包括data属性以及可能用到的父组件的state),如果是一个引用类型(Object或者数组都是引用类型),则需要先修改其引用地址(比如先复制到一个新的Object或者数组中),然后再修改其值,否则界面很可能不会刷新。(译注:这一段不了解的朋友建议先学习下js中的基本类型和引用类型。)

问题代码

class UserList extends PureComponent <Props,State>{

……

}

修改后成功代码

class UserList extends Component <Props,State>{

}

虽然官方文档我并没有看懂….

原文地址:https://www.cnblogs.com/intinity/p/9521284.html

时间: 2024-10-13 21:58:26

react native 踩坑之 SectionList state更新 不执行render重新渲染页面的相关文章

React – Native 踩坑记

运行的时候先报错说can’t be opened because it is from an unidentified developer,这是osx自己安全设置搞太高,去安全选项改了(allow apps download from anywhere)之后.又报错说permission问题,于是在终端用(chmod -R 755 /项目根目录)(主意:755后面一定要加空格)把所有文件都改成755权限,然后就可以完美运行了. 用模拟器和真机调试时,环境不同,在工程AppDelegate.m的-

react native codepush之搭建自己的更新服务器

参考文章-code-push-server 感谢上文作者的辛苦付出 本文简历在已经成功运行 微软 codepush热更新,并且了解codepush 相关指令的基础上. 参考文章-iOS 参考文章-android 简介 code-push-server是一个开源项目,基于 nodejs + mysql 搭建自己的热更新服务器 环境 macOS Sierra 10.12.1 nodejs v4.3.1 mysql 5.6 一.安装mysql(其他环境自行对应mysql安装) 推荐安装 mysql 5

React native采坑路

1. Running 1 of 1 custom shell scripts 卡住的问题. 分析: 四个文件没有下载完成. boost_1_63_0.tar.gz folly-2016.09.26.00.tar.gz double-conversion-1.1.5.tar.gz glog-0.3.4.tar.gz 1.下载文件 ---->这里有解决方案: http://bbs.reactnative.cn/topic/4301/ios-rn-0-45%E4%BB%A5%E4%B8%8A%E7%8

cocos creator踩坑日记(持续更新中...)

踩坑一 问题:项目在构建成Web Mobile后运行在浏览器和微信中,点击页面任何地方都会导致自动全屏 解决:在构建之后的main.js中,去掉 cc.view.enableAutoFullScreen(true) 踩坑二 问题:精灵使用move to后路径上会留下一些线条 原因:脏矩形出问题了 解决: Canvas模式下才有脏矩形,使用这个方法之前要判断 if (cc._renderType === cc.game.RENDER_TYPE_CANVAS) { cc.renderer.enabl

react js踩坑之路(一)

讲真如果让我选个主流的mvvm框架做项目,我会果断选择vue,写起来不要太方便哦.但是,pc端要兼容ie8这个坑货,所以pc端只好选用react了啦~移动端果断用vue咯 再来讲讲构建工具,还是基于webpack 和 gulp,然后将react和vue 分开打包相关配置如下 webpack会依次将公用的打包到vendors.js .react的打包到react中,vue相关的打包到vue中,最后剩下的部分打包到load.js中. 下面直接用react实现一个后台页面的container组件吧,这

React Native知识11-Props(属性)与State(状态)

一:Props(属性) 大多数组件在创建时就可以使用各种参数来进行定制.用于定制的这些参数就称为props(属性).props是在父组件中指定,而且一经指定,在被指定的组件的生命周期中则不再改变 通过在不同的场景使用不同的属性定制,可以尽量提高自定义组件的复用范畴.只需在render函数中引用this.props,然后按需处理即可.下面是一个例子: import React, { Component } from 'react'; import { AppRegistry, Text, View

React Native 爬坑之路

1.react 基础 (创建组件及在浏览器上渲染组件) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 1.react.js是React的核心库 --> <script src="js/react.min.js" chars

weex+vue2.x 踩坑实录(不定期更新)

执行 npm start 显示空白页面 这个是开始使用weex就出现的一个大坑,说实话对新手真的很不友好. 1.打开控制台显示:Cannot assign to read only property 'exports' of object '#<Object>',这是因为 import 和 module.exports 不能同时使用,打开出错的页面 src/router.js,将 module.exports = new Router 改为 export default new Router:

记一次在Windows上搭建React Native Android环境踩过的坑

要说最近技术圈什么比较活跃,我想除了动态加载框架和热修复技术之外,非Facebook的React Native莫属了吧,其实RN对IOS的支持比较早,但是Android似乎难产了,直到9月份才刚开源.距离RN开源也有一段时间了,一直没有去学习,今天兴趣来潮,索性学一把吧. 本文假设你的Windows上安装了Android SDK,并配置好了环境变量. 安装Node.js 从官网https://nodejs.org/en/下载Node.js的windows版,也不知道为什么版本迭代这么快,之前安装