ThisState değiştiğinde (dataSource değil) ListView kuvvetini yeniden çizme.

Question

Kişiler listesini görüntülemek için ListView kullanan bir bileşen oluşturdum. Bir satır tıklandığında, state'un tüm seçili kişileri içeren bileşendeki bir diziyi güncellerim. Ancak, bu diziyi ListView bileşenim için dataSource olarak kullanmıyorum.

Seçilen kişiler için bir görüntüyü görüntülemek için bu dizinin her değiştirilmesinde ListView yeniden çizilmesini istiyorum.

Ben .forceUpdate() aramaya çalıştım

renderListView: function(){ 
    <ListView 
     dataSource={this.state.dataSource} 
     renderRow={this.renderRow} 
     style={styles.listView} 
    /> 
} 
renderRow:function(row){ 
    return if(this.state.something === true) <Text>Something</Text> 
    else <Text>Something Else</Text> 
} 

, bu render yöntemi değil renderRow yöntemini çağırır: Burada

benim şimdiki durumun bir örneğidir.

Herhangi bir öneriniz var mı?

Answer 1

Sadece aynı sorunu yaşadım. Benim soruma bakın: React Native ListView not updating on data change

Temel olarak, ListView bileşeniyle bir hata var gibi görünüyor ve ListView'in yeniden çizilmesi için veri kaynağında değişen her öğeyi yeniden oluşturmanız gerekir.

İşte çalışan bir örnek: https://rnplay.org/apps/GWoFWg

Birincisi, veri kaynağı ve dizinin bir kopyasını oluşturmak ve devlet kaydedin. Benim durumumda, foods dizidir.

constructor(props){ 
    super(props); 
    var ds = new ListView.DataSource({ 
     rowHasChanged: (row1, row2) => row1 !== row2, 
    }); 
    this.state = { 
     dataSource: ds.cloneWithRows(foods), 
     db: foods, 
    }; 
} 

Eğer veri kaynağı birşeyleri değiştirmek Nufusa kaydedilen dizinin bir kopyasını değişimle öğeyi yeniden inşa etmek ve daha sonra (durumuna geri değişiklikle yeni bir dizi kaydetmek istediğinizde hem db ve veri kaynağı).

onCollapse(rowID: number) { 
    console.log("rowID", rowID); 
    var newArray = this.state.db.slice(); 
    newArray[rowID] = { 
     key: newArray[rowID].key, 
     details: newArray[rowID].details, 
     isCollapsed: newArray[rowID].isCollapsed == false ? true : false, 
    }; 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(newArray), 
     db: newArray, 
    }); 
}