360SDN.COM

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

来源:  2017-06-18 17:10:22    评论:0点击:

来源:http://blog.csdn.net/lemongirls/article/details/52539462

适用条件

  • ListView的数据类型是数组对象,对象的某些个属性需要用到界面的响应中,例如
 
  1. {text: 'row', selected: true}  


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

解决方法

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

 

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

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

 

 
  1. [   
  2.       {selected: false,},   
  3.       {selected: false,},   
  4.       {selected: false,},  
  5.       ...   
  6.     ]  


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

 

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


 

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

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

 
  1. let newData = dataSource._dataBlob.s1;  


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

 
  1. <span style="font-family:FangSong_GB2312;font-size:14px;"><span style="white-space:pre">    </span>let newData = JSON.parse(JSON.stringify(dataSource._dataBlob.s1)); </span>  

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

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



 

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

若有错误之处,还望指点。
为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权