React NativeでListView項目を削除する

Question

ListViewから行を削除するのが難しいです。どのクリックがオンになっても、リストの最後の要素が削除されます。 しかし、console.logは配列が項目を正しく削除したと私に伝えますが、間違ってレンダリングします...インターネットにはいくつかの解決策がありますが、私の問題解決に役立っているものはありません。

GIF of my problem

ログ

あなたが見ることができるように、それは実際に右の項目を削除しますが、間違った配列を表示？

Nov 6 22:18:39 Viviennes-Air reminders[25992] <Notice>: { rowID: '0' } Nov 6 22:18:39 Viviennes-Air reminders[25992] <Notice>: [ 'testing 2', 'testing 3' ] Nov 6 22:18:39 Viviennes-Air reminders[25992] <Notice>: { _rowHasChanged: [Function: rowHasChanged], _getRowData: [Function: defaultGetRowData], _sectionHeaderHasChanged: [Function], _getSectionHeaderData: [Function: defaultGetSectionHeaderData], _dataBlob: { s1: [ 'testing 2', 'testing 3' ] }, _dirtyRows: [ [ false, false, true ] ], _dirtySections: [ false ], _cachedRowCount: 3, rowIdentities: [ [ '0', '1', '2' ] ], sectionIdentities: [ 's1' ] }

ここに私のコンストラクタです：

constructor(props) { 
super(props); 
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); 
this.state = { 
    items: [], 
    dataSource: ds.cloneWithRows([]), 
    newItem: "", 
};} 

リストビュー：

<ListView 
     style={styles.container} 
     dataSource={this.state.dataSource} 
     enableEmptySections={true} 
     renderRow={(data, sectionID, rowID) => this.renderRow(data, sectionID, rowID)} 
     renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator}/>} 
     /> 

でrenderRow機能：

renderRow(data, sectionID, rowID){ 
console.log("ITEM: ", data) 
return <TouchableOpacity style={styles.listItem} onPress={() => this._delete({rowID})} 
      activeOpacity={0.1}> 
      <Text style={styles.listItemText}>{data}</Text> 
      </TouchableOpacity>} 

そして最後に、削除機能：

_delete(index){ 
    this.state.items.splice(index, 1) 
    console.log(index) 
    console.log(this.state.items) 
    this.setState({ 
    dataSource: this.state.dataSource.cloneWithRows(this.state.items) 
    }) 
    console.log(this.state.dataSource)} 

私は今、私たち2時間のためにこれを理解しようとしている、と私はすべてを正しくやっているかなり確信しています。

Answer 1

私はBurak Karasoyに同意しますが、コードには別の間違いがあります。

var newList= this.state.items.splice(index, 1) 

newListには削除されたアイテムが含まれますが、実際にはアイテムを削除した後に新しいリストが必要です。変更はあなたのコードの作業があることを確認するために必要なので

、

は状態オブジェクトで itemsを保管しないでください。代わりに、クラスのインスタンス変数として保存し、

_delete(index) { 
    this.items.splice(index, 1)// This will remove the element at index, and update this.items with new array 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(this.items) 
    }); 
}