React Native 解决RenderRow只渲染一次

最新推荐文章于 2023-04-12 09:15:38 发布

原创最新推荐文章于 2023-04-12 09:15:38 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react-native #renderRow

react-native 专栏收录该内容

42 篇文章

订阅专栏

本文介绍了一种在React Native中使用ListView组件时更新数据的方法。具体包括如何通过rowHasChanged函数判断数据变化、如何利用状态机保存数据并进行数组拼接以实现数据更新，以及如何重置数据源。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据源判断， rowHasChanged的时候数据源可变

 let ds = new ListView.DataSource({
            rowHasChanged: (r1, r2) => (r1, r2) => {
                return r1 !== r2;
            }
        });

状态机声明一个数组保存每次。请求下来的数据，利用concat拼接数组

// 状态机声明空数组
 this.state = {
     dataArray: []
 }

网络请求拼接数组

let oldArray = this.state.dataArray;
let newArray = [];
newArray = oldArray.concat(json.data.list)
 this.setState({
     dataSource: dataSource.cloneWithRows(newArray),                    
     dataArray: newArray
 })

重置数据源，通过Object.assign，让renderRow渲染

 let dataArray = Object.assign({}, this.state.dataArray)
        this.setState({
            dataSource: this.state.dataSource.cloneWithRows(dataArray)
        })