解決react native ListView.DataSource 改變數組項屬性視圖不刷新

當咱們使用react native的ListView.DataSource來提供高性能的數據處理和訪問。但是當咱們改變已存在數組項的屬性時,會發現視圖並不會如你但願的那樣更新,相似代碼以下react

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})

不當之處請指正,謝謝性能

相關文章
相關標籤/搜索