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任何解决方案。

谢谢

答

问题是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。

ListView在react-native的状态改变后不会重新渲染？

相关推荐