解决react native ListView.DataSource 改变数组项属性视图不刷新

wpw 发布于2019-08-26 11:34 / 3268人阅读

摘要：可是当我们改变已存在数组项的属性时，会发现视图并不会如你希望的那样更新，类似代码如下当我们修改并结果发现我们的视图并没有如期改变。我的解决办法是，只替换被改动的数组项，并且暂时不更新，当并非同步完成后再更新，代码如下不当之处请指正，谢谢

当我们使用react native的ListView.DataSource来提供高性能的数据处理和访问。可是当我们改变已存在数组项的属性时，会发现视图并不会如你希望的那样更新，类似代码如下

export default class extends Component {
    dataSource = [
        {foo: "bar", active: false},
        {foo: "zoo", active: false}
    ]
    ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 }))
    constructor(props) {
        this.state = {
            lists: this.ds.cloneWithRows(this.dataSource)
        }
    ......

当我们修改dataSource[0].active = true, 并setState,结果发现我们的视图并没有如期改变。在网上找了一圈，说粗暴的替换整个dataSource之类的，结果发现根本木有效果，r1还是老老实实的等于r2，原因的话等我看看源码在过来写一下。
我的解决办法是，只替换被改动的数组项，并且暂时不更新dataSource，当setState(并非同步)完成后再更新，代码如下：

let temp = this.dataSource.map(row => row.foo === "bar" ? Object.assign({}, row, {active: true} : row))
this.setState({lists: this.ds.cloneWithRows(temp)}, ()=>{this.dataSource = temp})

不当之处请指正，谢谢

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107135.html

React Native 简介：用 JavaScript 搭建 iOS 应用(2)

摘要：分别命名文件为和。上述代码指定了当某列书籍被点击时响应一个回调函数。当组件的值改变时例如用户键入一些文本，将会调用组件，同时为组件指定一个回调函数。在调用时，回调函数和利用用户输入的数据将设置和属性。【编者按】本篇文章的作者是 Joyce Echessa——渥合数位服务创办人，毕业于台湾大学，近年来专注于协助客户进行 App 软体以及网站开发。本篇文章中，作者介绍通过 React N...

n7then 2019-08-21 10:37 评论0 收藏0
React Native 基础练习指北（二）

摘要：承接上文基础练习指北一，我们来看看如果通过接口获取线上数据并展示。如果使用无法刷新效果，请检查的权限设置。会在组件加载完成后，使用方法发送请求，并且只发送一次。牢记在最后要使用，否则不会出现错误提示。下一步在返回的对象中添加空的。承接上文《React Native 基础练习指北（一）》，我们来看看React Native如果通过接口获取线上数据并展示。 Tips: 如果使用cm...

shixinzhang 2019-08-21 10:29 评论0 收藏0