this.stateが変更されたときにListViewを強制的に再描画する方法（dataSourceではなく）。

Question

ListViewを使用して連絡先のリストを表示するコンポーネントを作成しました。行をクリックすると、選択したすべての連絡先を含むstateのコンポーネントの配列が更新されます。しかし、私はListViewコンポーネントのためにこのアレイをdataSourceとして使用していません。

このアレイが変更されるたびに、選択した連絡先の画像を表示するためにListViewを再描画したいと思います。ここで

は私の現在の状況の例である：

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

私はそれがrender方法ではなく、renderRowメソッドを呼び出して、.forceUpdate()を呼び出そうとしました。

提案がありますか？

Answer 1

私はちょうど同じ問題を抱えていました。 React Native ListView not updating on data change

基本的には、ListViewコンポーネントにバグがあり、データソースで変更された各アイテムを再構築して、リストビューを再描画する必要があります。

はここで働い例です： https://rnplay.org/apps/GWoFWg

まず、データソースとの配列のコピーを作成し、状態に保存します。私の場合、foodsが配列です。

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

あなたは、データソースで何かを変更するには、状態に保存された配列のコピーを作成し、変更した項目を再構築してから（状態に戻って変更して新しい配列を保存したい場合は、両方のデータベースとデータソース）。

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