ListView在react-native的狀態改變後不會重新渲染？

我正在研究<ListView>組件，我有一個名稱列表，但在更改狀態後，它正在更改值，但它不會重新呈現ListView。ListView在react-native的狀態改變後不會重新渲染？

isSelect：假 - （州）

isSelect：真 - （州）

代碼：

var designerName = [{id: 'Calvin Klein', name: 'Calvin Klein', isSelected: false}, 
       {id: 'Donatella Versace', name: 'Donatella Versace', isSelected: false}, 
       {id: 'Valentino Garavani', name: 'Valentino Garavani', isSelected: false}, 
       {id: 'Giorgio Armani', name: 'Giorgio Armani', isSelected: false}]; 

export default class filter extends Component { 
    constructor() { 
     super(); 
     const listDs = new ListView.DataSource({ 
      rowHasChanged: (r1, r2) => r1 !== r2, 
     }); 
     this.state = { 
      listDs:designerName 
     }; 
    } 

componentDidMount(){ 
    this.setState({ 
    designerDataSource:this.state.designerDataSource.cloneWithRows(this.state.listDs), 
    }) 
} 

render() { 
    return (
     <View> 
      <ListView 
       dataSource={this.state.designerDataSource} 
       renderRow={this.renderRow.bind(this)} 
      /> 
     </View> 
    ); 
} 

renderRow(item){ 
    return (
     <TouchableHighlight key={item.id} onPress={this.onItemDesigner.bind(this, item)}> 
       <View> 
        <View> 
         {this.renderName(item)} 
        </View> 
        <View> 
         <Text>{item.name}</Text> 
        </View> 
       </View> 
      </TouchableHighlight> 
    ); 
} 

renderName(item){ 
    if(item.isSelected) { 
     return(
      <Image 
       style={{ 
        width: 15, 
        height:15}} 
       source={require('../images/black_tick_mark.png')} /> 
     ); 
    } 
} 

onItemDesigner(item){ 
    var tempDesigner = this.state.listDs.slice(); 

    for(var i=0; i<tempDesigner.length; i++){ 
     if (tempDesigner[i].id == item.id && !tempDesigner[i].isSelected) { 
      tempDesigner[i].isSelected = true; 
     }else if (tempDesigner[i].id == item.id && tempDesigner[i].isSelected){ 
      tempDesigner[i].isSelected = false; 
     } 
    } 
    this.setState({ 
     designerDataSource: this.state.designerDataSource.cloneWithRows(tempDesigner), 
    }); 
    } 
}

敬請通過我的上面的代碼，讓我知道，如果你f任何解決方案。

謝謝

來源

2016-12-02 Deeptiman Pattnaik

問題是Javascript部分ListView的一部分。當你構造ListView.DataSource時，它來自這個函數。

const listDs = new ListView.DataSource({ 
    rowHasChanged: (r1, r2) => r1 !== r2, 
});

的rowHasChanged是，如果一個渲染應該發生什麼控制，它的檢查，看看舊的對象等於新對象。

如果其中一個項目已更改，則將兩個對象比較在一起不會返回false。它檢查實際對象本身是否指向不同的內存位置。

考慮這些例子。

let array1 = [{foo: 'bar'}] 
let array2 = array1.slice() 
// sliced array still contains references to the items 
console.log(array2[0] === array1[0]) 
// => true 

// change something in array1 
array1[0].foo = 'test' 
// you'll see the change in array2 as well 
console.log(array2[0].foo) 
// => 'test'

，使得它有一個新的變量位置，你可以創建一個空的{}對象，並通過原鍵遍歷並保存鍵/值對新的，或者，更簡單一點就是用JSON.parse(JSON.stringify(obj))克隆該對象。

array2[0] = JSON.parse(JSON.stringify(array1[0])) 
console.log(array2[0] === array1[0]) 
// => false

你可以從技術上克隆整個數組，或者只有那個改變的數組。我想可以更有效的做到這一點，只需在更改的對象上執行以防止不需要的呈現。

結賬Object equality in JavaScript。

來源

2016-12-02 13:19:26

ListView在react-native的狀態改變後不會重新渲染？

回答

相關問題