Панель фильтров не сбрасывает данные при пустом React-Native

Question

Я делаю приложение на реагирующем языке с отправкой и получением данных из asyncStorage, все работает хорошо, я могу сохранить данные и получить их, но у меня проблема с правильной настройкой панели фильтров.Он работает только в одном направлении, например, когда я пишу что-то внутри ввода, я вижу результаты, которые подходят, однако, когда я удаляю символы из ввода, данные не возвращаются в нормальное состояние и я ничего не вижукак это исправить?

constructor(props) {
    super(props);
    this.state = {
      search: "",
      data: [],
      error: ""
    };
  }

 handleTextChange = search => {
    this.setState({ search });
    let data = this.state.data;

    data = data.filter(el => el.name.match(search))
    this.setState({data:data})

  };

_displayAllData = () => {
    return this.state.data.map(el => {
      return (
        <View>
          <Text >
            Nazwa: <Text>{el.name}</Text>
          </Text>

          <View>
              <Text>
                Ulica: <Text>{el.street}</Text>
              </Text>           
            </View>
        </View>
      );
    });
  };

render() {
    return (
      <ScrollView>
        <View style={styles.container}>
          <View style={styles.inputContainer}>
            <TextInput
              placeholder="find results"
              onChangeText={this.handleTextChange}
              value={this.state.search}
            />
          </View>

          {this._displayAllData()}

          <View>
            <Text>{this.state.error}</Text>
          </View>
        </View>
      </ScrollView>
    );
  }

Answer 1

Это происходит потому, что вы выполняете фильтрацию в исходный список (массив данных).Попробуйте одно, возьмите два массива , один для Показать список данных фильтра и один для исходный список данных.

См. Нижекод.Сообщите мне, если есть какие-либо проблемы с этим решением.

constructor(props) {
    super(props);
    this.state = {
      search: "",
      data: [], 
      filterData:[], // take one more list to show filter data list
      error: ""
    };
  }

Сначала добавьте в оба списка одинаковые данные:

componentWillMount(){
 this.setState({data: //set your data, filterData: //set same data})
}

Данные HandleSearch:

 handleTextChange = search => {
    this.setState({ search });
    let data = this.state.data; 
    //apply filter to your original list
    data = data.filter(el => el.name.match(search))
    this.setState({filterData:data}) //set filter result in your filterData list.

  };

Используйте filterDataList , чтобы показать ваш список

_displayAllData = () => {
    return this.state.filterData.map(el => {
      return (
        <View>
          <Text >
            Nazwa: <Text>{el.name}</Text>
          </Text>

          <View>
              <Text>
                Ulica: <Text>{el.street}</Text>
              </Text>           
            </View>
        </View>
      );
    });
  };