React Native：带有ExtraData的FlatList过滤器不会刷新

Question

I have a Flatlist which works like a To Do list with a filter for “ToDo” and “Upcoming”. When a user swipes to complete the item, it gets hidden from the list by changing a displayIndex attribute. I would like this to reload the list after the swipe or before the user selects “Upcoming”. After reading through other stack overflow answers I have tried adding extraData={this.state} (and creating a this.state.refresh property which changes after every swipe) to the Flatlist and I also ensured that the list items themselves are React.Components and not PureComponents. I have also tried two ways to hide the ListItems, conditionally rendering them and conditionally changing the style to hidden. Still, I am not seeing any change in my Flatlist.

Below is some partial code to see if there are any gotchas I missed:

In the MainScreen.js

async _addCompletion(myItem) {
    //Lots of business logic and after it's done the below code activates
    await AsyncStorage.setItem(myItem.key, JSON.stringify(myItem));
    await this._updateData();
    this.setState({ refresh: !this.state.refresh });
}
 render() {
    const buttons = ['To Do', 'Upcoming'];
    const { displayModeIndex } = this.state;
    return (
      <View>
        <ButtonGroup
          onPress={this._updateButtonIndex}
          buttons={buttons}
          selectedIndex={displayModeIndex}
        />
        <FlatList
          displayMode={this.state.displayModeIndex}
          data={this.state.data}
          extraData={this.state}
          scrollEnabled={this.state.scrollEnabled}
          renderItem={({ item }) => (
            <MyListItem
              myListItem={item}
              addCompletion={this._addCompletion}
              displayIndex={this.state.displayModeIndex}
              setScrollEnabled={this._setScrollEnabled}
              navigation={this.props.navigation}
            />
          )}
        />
      </View>
    );
  }

In MyListItem.js

_displayMyItem {
   //Logic that determines whether to display a myItem based on several factors. I can confirm this works after refreshing.
}

  _hideMyItem = () => {
    Animated.timing(this.containerHeight, {
      toValue: 0,
    }).start(() => {
      this.setState({ hidden: true });
    });
  };

render () {
const {myItem} = this.state;
//Other code that determines how the list item looks depending on myItem data.
return (
//I have also tried to return null if this._displayMyItem(this.state.myItem) returns false 
<View style={!this._displayMyItem(this.state.myItem) && { display: 'none' }}>
          <Swipeable
            onPress={this._onPressRow}
            setScrollEnabled={this.props.setScrollEnabled}
            addCompletion={this.props.addCompletion}
            hideMyItem={this._hideMyItem}
            myItem={this.state.myItem}
          >
        //Other JSX Code
</View>
)
}

The Swipeable is a custom component that calls addCompletion after a swipe and _hideMyItem after everything is done. It is not a PureComponent either.

There's a lot going on here, so I've only included code that seems relevant. I can add more if needed. The addCompletion method is a long

Answer 1

would help some captures... When you swipe the item , it's just empty right?, if it leaves an empty space try this way of conditional rendering , idk if it would work.

in MyListItem.js

 render () {
    const {myItem} = this.state;
    //Other code that determines how the list item looks depending on myItem data.
    return (
    //I have also tried to return null if this._displayMyItem(this.state.myItem) returns false 
{!this.state.hidden?
    <View style={!this._displayMyItem(this.state.myItem) && { display: 'none' }}>
              <Swipeable
                onPress={this._onPressRow}
                setScrollEnabled={this.props.setScrollEnabled}
                addCompletion={this.props.addCompletion}
                hideMyItem={this._hideMyItem}
                myItem={this.state.myItem}
              >
            //Other JSX Code
    </View>:null}
    )
    }

wich checks if this.state.hidden is false , returns the component, else, returns null