Question

今天，我尝试使用react-native-Swipeable实施滑动以删除Flatlist上的行，它的工作原理非常好，但是我有此警告。我进行了很多研究并尝试了很多方法，但找不到解决方法。

此警告仅在我尝试删除行时显示。

警告：无法在已卸载的设备上调用setState（或forceUpdate）零件。这是空操作，但表示您的内存泄漏应用程序，以修复，取消所有订阅和异步任务在componentWillUnmount方法中

这是我的代码

    export default class App extends Component {

  state = {
    currentlyOpenSwipeable: null,
    isSwiping: false,
    rowKey:null,
    deletedRowKey:null
  };

  handleScroll = () => {
    const {currentlyOpenSwipeable} = this.state;

    if (currentlyOpenSwipeable) {
      currentlyOpenSwipeable.recenter();
    }
  };

  handleSwipeStart = (index)=>{
    this.setState({isSwiping: true,rowKey:index})
  }
    handleSwipeEnd = ()=>{
    this.setState({isSwiping: false})
  }

  refreshFlatList = (deletedKey)=>{
    this.setState({deletedRowKey: deletedKey})
  }

  returnRowKey = ()=>{
    this.state.rowKey;
  }

  render() {
    const {currentlyOpenSwipeable} = this.state;
    const itemProps = {
      onOpen: (event, gestureState, swipeable) => {
        if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
          currentlyOpenSwipeable.recenter();
        }

        this.setState({currentlyOpenSwipeable: swipeable});
      },
      onClose: () => this.setState({currentlyOpenSwipeable: null})
    };

    return (
      // <ScrollView onScroll={this.handleScroll} style={styles.container} scrollEnabled={!this.state.isSwiping}>
      //   <Example1 {...itemProps} onSwipeStart={this.handleSwipeStart} onSwipeRelease={this.handleSwipeEnd}/>
      // </ScrollView>
      <FlatList data={dataObj} style={{marginTop:20}}
      onScroll={this.handleScroll}
      scrollEnabled={!this.state.isSwiping}
      keyExtractor={item=>item.key}
      ItemSeparatorComponent={()=><View style={{flex:1,backgroundColor:'white',height:3}}></View>}
      renderItem={({item,index})=><ItemList {...itemProps}
      index={index}
      parentFlatList={this}
      returnRowKey={this.returnRowKey}
      item={item}
      onSwipeStart={()=>this.handleSwipeStart(index)} onSwipeRelease={this.handleSwipeEnd} />} />
    );
  }
}

function ItemList({onOpen, onClose,onSwipeStart,onSwipeRelease,index,item,parentFlatList,returnRowKey}) {
  return (
    <Swipeable
    onSwipeStart={onSwipeStart}
    onSwipeRelease={onSwipeRelease}
      rightButtons={[
        <TouchableOpacity style={[styles.rightSwipeItem, {backgroundColor: 'lightseagreen'}]} 
        onPress={()=>{

          Alert.alert(
            'Alert', 'Are you sure you want delete this?', [
            {
              text: 'No',
              onPress: () => console.log('Cancel Pressed'),
              style: 'cancel',
            },
            { text: 'Yes', onPress: () => {
             dataObj.splice(index,1);
              //// refresh the list
              parentFlatList.refreshFlatList(returnRowKey)
            } },
          ],
          { cancelable: true}
          );
        }}>
          <Text>Delete</Text>
        </TouchableOpacity>,
        // <TouchableOpacity style={[styles.rightSwipeItem, {backgroundColor: 'orchid'}]}>
        //   <Text>Pin</Text>
        // </TouchableOpacity>
      ]}
      onRightButtonsOpenRelease={onOpen}
      onRightButtonsCloseRelease={onClose}
    >
    <View style={{flex:1,flexDirection:'row',paddingTop:5 ,backgroundColor:'#ebeef4'}}>
    <Image source={{uri: item.imageUrl}}
    style={{width:50,height:50}}>
    </Image>
    <View style={{flex:1,flexDirection:'row',justifyContent:'center',alignItems:'center'}}>
    <Text style={{fontSize:16,color:'red',fontWeight:'bold',padding:10,textAlign:'center'}}>
  {  item.name}  </Text>
    <Text style={{fontSize:16,color:'green',fontWeight:'bold',textAlign:'center'}} >{item.emoji}</Text>
    </View>
    </View>
    </Swipeable>
  );
}

尝试在FlatList上实施滑动删除操作时发生错误

0 个答案: