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

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

1 个答案: