Question

我无法从ListView中删除行。它会删除列表的最后一个元素，无论点击哪个元素。 但是，console.log告诉我数组已经正确删除了该项，但它呈现错误... 互联网上已经有一些解决方案，但没有一个能帮助我解决我的问题。

日志

正如您所看到的，它实际上会删除正确的项目，但显示错误的数组？

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：

<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，但代码中还有另一个错误。

close()

newList将包含已删除的项目，但实际上我们需要的是删除项目后的新列表。

让代码工作所需的更改是，

不要将var newList= this.state.items.splice(index, 1)存储在状态对象中。而是将其存储为类实例变量并设置items，如下面的代码

dataSource

现在更新您的this.items=this.getItems(); this.setState({ dataSource: this.state.dataSource.cloneWithRows(this.items) });方法，如下所示

_delete

删除React Native中的ListView项

1 个答案: