Question

在SwipeableListView中滑动行时，我想删除rowitem并重新渲染列表。

现在发生的事情是列表中的最后一项始终被删除，而不是刷掉的项目。有什么想法是错的吗？

export default class SwipeList extends Component {
  constructor(props) {
  super(props);
  let ds = SwipeableListView.getNewDataSource();

  this.favourites = []

  this.state = {
    ds:[],
    dataSource:ds,

    isLoading:true,  
    closeRow:false,
   };
  }

componentWillMount () {
  store.get('KEY_FAV').then(value => {
    typeof(value) === 'object'
      ? this.favourites = Object.keys(mockdata.favourite)
      : this.favourites = JSON.parse(value)

    this.setState({
      dataSource: this.state.dataSource.cloneWithRowsAndSections(this.genData(this.favourites
)),
      isLoading:false
    })
  })
}


genData = (list) => {
  let dataBlob = []

  for(let i = 0; i <list.length; i++) {
    dataBlob.push({id:list[i], name:list[list[i]]})
  }
return [dataBlob, []]
}

直到这里没关系，SwipeableList加载了所有RowItems。但是在下面的handleSwipeAction（）中为dataSource设置新状态时，列表只会删除最后一项，而不是选中的。

handleSwipeAction = (rowData, SectionID, rowID) => {
  AlertIOS.alert('Remove ' + rowData.name + ' \nfrom Favourites?', null, 
  [
    {text:'Cancel', onPress: () => {this.setState({closeRow:true})}, style:'cancel'},
    {text:'OK', onPress: () => {
      this.favourites.slice()
      this.favourites.splice(rowID, 1)

      this.setState({
        closeRow:true,
      })  
      this.setState({//I THINK HERE IS THE PROBLEM
        dataSource:this.state.dataSource.cloneWithRowsAndSections(this.genData(this.favourites))
      })

      store.set('KEY_FAV', this.favourites)                 
    }}
  ])
}

onSwipe = (rowData, SectionID, rowID) => {
  return (
    <View style={styles.actionsContainer}>
      <TouchableHighlight
        onPress={() => this.handleSwipeAction(rowData, SectionID, rowID)}>
        <Text style={styles.actionsItem}>Remove</Text>
      </TouchableHighlight>
    </View>
   );
  };

和渲染功能

render() {
 if(this.state.isLoading) return null

return (
  <View style={styles.container}>

      <SwipeableListView
        bounceFirstRowOnMount
        enableEmptySections={true}
        dataSource={this.state.dataSource}
        maxSwipeDistance={this.props.swipeDistance}
        renderRow={(item) => this.renderItem(item)}
        renderQuickActions={this.onSwipe}
        renderSeparator={this.renderSeperator}
        doCloseRow={this.state.closeRow}
      />
  </View>
);

}

Answer 1

当你完成slicing时，我相信你这样做：

let ds = SwipeableListView.getNewDataSource();一遍又一遍，然后

this.setState({ dataSource: ds.cloneWithRowsAndSections(this.genData(this.favourites)) })

它应该工作。出于某种原因，我仍然无法得到。另外，我不知道为什么你在函数中做了两个setState()。一个是不够的？

所以这应该有效：

handleSwipeAction = (rowData, SectionID, rowID) => {
  AlertIOS.alert('Remove ' + rowData.name + ' \nfrom Favourites?', null, 
  [
    {text:'Cancel', onPress: () => {this.setState({closeRow:true})}, style:'cancel'},
    {text:'OK', onPress: () => {
      this.favourites.slice()
      this.favourites.splice(rowID, 1)

      let ds = SwipeableListView.getNewDataSource(); // add this 

      this.setState({ dataSource: ds.cloneWithRowsAndSections(this.genData(this.favourites)), closeRow:true })

      store.set('KEY_FAV', this.favourites) }} ])
}

React-Native SwipeableListView不正确更新

1 个答案: