React-Native SwipeableListView不正确更新

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