当我们使用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.f2er.com/react/301980.html