React Native：帶有ExtraData的FlatList過濾器不會刷新

Question

我有一個Flatlist，它的工作方式類似於待辦事項列表，帶有用於“待辦事項”和“即將到來”的過濾器。 當用戶滑動完成項目時，通過更改displayIndex屬性將其從列表中隱藏。 我希望在刷卡后或用戶選擇“即將到來”之前重新加載列表。 閱讀完其他堆棧溢出的答案后，我嘗試將FlatData = {this.state}（並創建this.state.refresh屬性，每次滑動后都會更改）添加到Flatlist，並且我還確保列表項本身就是React.Components而不是PureComponents。 我還嘗試了兩種方法來隱藏ListItem，有條件地渲染它們以及有條件地將樣式更改為隱藏。 不過，我的單位列表沒有任何變化。

下面是一些部分代碼，看是否有我錯過的陷阱：

在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>
    );
  }

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

Swipeable是一個自定義組件，在完成滑動后調用addCompletion，在完成所有操作后調用_hideMyItem。 它也不是PureComponent。

這里發生了很多事情，所以我只包含了似乎相關的代碼。 如果需要，我可以添加更多。 addCompletion方法很長

Answer 1

可以幫助捕獲某些內容...當您滑動項目時，它只是空的吧？如果它留有空白，請嘗試這種有條件的渲染方式，如果可行，請使用idk。

在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檢查this.state.hidden是否為false，返回組件，否則返回null