搜索过滤器未正确呈现 FlatList

Question

我的 flatList 显示了 2 个项目，如果我搜索文本，它会显示该项目。 但是现在当我开始单击退格并删除我的搜索文本时，我的其他项目不会显示，而是它仍然在前一个项目上。

我的代码如下：

export default class HomeComponent extends Component {
  constructor(props){
    super(props)
      this.state = {
        isLoading: true,
        notifications: [],
        query: ''
      }
  };


  componentDidMount() {
    fetch('https://140xya6a67.execute-api.ap-southeast-1.amazonaws.com/dev/', {
    method: 'GET',
  })
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        notifications: responseJson,
        notificationRead: false
    })
    })
  };

  goToDetails() {
    return this.props.navigation.navigate(Details) ;
  }  


  renderItem({item}) {
    return <NotificationItem item={item} 
    onPress = {()=> {this.goToDetails()}}
    />
  }  


  handleSearch(text){
      const newData = _.filter(this.state.notifications, (item) => {
      const itemData = item.OrderDate ? item.OrderDate.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      notifications: newData,
      query:text,
    });
  }

  renderContent() {
    let {notifications} = this.state;

    return (
    <View>
    <SearchBar placeholder='type here...' lightTheme round value={this.state.query} onChangeText={(text)=>{this.handleSearch(text)}} />
    <FlatList
    keyExtractor={(item, id) => item.id} 
    data={notifications}
    renderItem={this.renderItem.bind(this)}
    /> 
    </View>

    );
  }


  render () {
  let {fill, container} = styles;

  return (
    <View style={ [fill, container] }>
      {this.renderContent()}
    </View>
  );
  }


}

搜索过滤器有效，但一旦我开始清除搜索文本，我的平面列表应该重新呈现为其初始 state。 请检查我的代码，让我知道出了什么问题。

Answer 1

问题是当你过滤你的列表时，你会从最初的完整列表中丢失你的元素。 解决方案是在 state 中声明 2 个变量：1 保存您的所有元素，其他 2 过滤您的搜索

export default class HomeComponent extends Component {
  constructor(props){
    super(props)
      this.state = {
        isLoading: true,
        allNotifications: [],
        filteredNotifications: [],
        query: ''
      }
  };


  componentDidMount() {
    fetch('https://140xya6a67.execute-api.ap-southeast-1.amazonaws.com/dev/', {
    method: 'GET',
  })
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        allNotifications: responseJson,
        filteredNotifications: responseJson,
        notificationRead: false
    })
    })
  };

  goToDetails() {
    return this.props.navigation.navigate(Details) ;
  }  


  renderItem({item}) {
    return <NotificationItem item={item} 
    onPress = {()=> {this.goToDetails()}}
    />
  }  


  handleSearch(text){
      const newData = _.filter(this.state.allNotifications, (item) => {
      const itemData = item.OrderDate ? item.OrderDate.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      filteredNotifications: newData,
      query:text,
    });
  }

  renderContent() {
    let {filteredNotifications} = this.state;

    return (
    <View>
    <SearchBar placeholder='type here...' lightTheme round value={this.state.query} onChangeText={(text)=>{this.handleSearch(text)}} />
    <FlatList
    keyExtractor={(item, id) => item.id} 
    data={filteredNotifications}
    renderItem={this.renderItem.bind(this)}
    /> 
    </View>

    );
  }


  render () {
  let {fill, container} = styles;

  return (
    <View style={ [fill, container] }>
      {this.renderContent()}
    </View>
  );
  }


}