react native ListView中数据变了,但是ListView不刷新的解决方法

郤望
2023-12-01

适用条件

  • ListView的数据类型是数组对象,对象的某些个属性需要用到界面的响应中,例如

{text: 'row', selected: true}


点击时selected = !selected,row的颜色根据selected进行变换。

解决方法

  • 相当残忍及吃内存的方式   
let newData = JSON.parse(JSON.stringify(dataSource._dataBlob.s1));
  •  利用Object.assign 
  • 使用Immutable.js 
  • 还有种绕远路的方式,就是在有数据的时候,多出来一个对象放dataSource的数据,在修改的时候修改那份,再直接cloneWithRows(修改之后的数据)


以下是我使用时候的具体介绍。

具体情景是,ListView每一行是一个选择器,点击该行,该行的数据取反,相应的选择器的状态也跟着变化。 我当时的数据类型大概是这样子的:

[ 
  	  {selected: false,}, 
  	  {selected: false,}, 
  	  {selected: false,},
   	  ... 
	]


简而言之就是数组对象。然后我每次点击的时候,大概做了这样子的事情:

let newData = dataSource._dataBlob.s1; 
newData[rowID].isSelected = !newData[rowID].isSelected;
this.setState({ 
  dataSource: this.state.dataSource.cloneWithRows(newData) 
})



 

再将newData 用cloneWithRows的方法setState到ListView的数据中。然后就出现问题了,数据虽然变化了,但是眼睛能看到的选择器的状态根本不变啊...就就尴尬了...

最后好好琢磨了一番,发现了问题的所在,rowHasChanged每次返回的都是false,都是false!! 就是rowHaschange接受到的前后的数据都是一样的!怎么可能是一样的!不是取反了吗 我又琢磨了一番。这次真的发现了问题的所在。

let newData = dataSource._dataBlob.s1;


这句话就是罪魁祸首 ! 这样的拷贝的话是浅拷贝,当改变newData的值 ,dataSource._dataBlob.s1也跟着在变。所以rowHaschange接收到的前后数据确实是一样的。但是数组中又是对象的情况,要达到深拷贝的话,最简单,最残忍的方法就是

	let newData = JSON.parse(JSON.stringify(dataSource._dataBlob.s1)); 

这是上面的第一种方式,第二种是Object.assign。

    let newData = dataSource._dataBlob.s1; 
	let _item = Object.assign({}, newData[rowID], {'isSelected': false}); 
	this.setState({ 
	  dataSource: this.state.dataSource.cloneWithRows(Object.assign({}, newData, {[rowID]: _item})),
 	}) 




===============================================~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

若有错误之处,还望指点。

 类似资料: