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

2024年3月12日 94次阅读 来源: 吴霸霸

当我们使用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://segmentfault.com/a/1190000013090097
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞