Блог

Я создаю приложение на react-native с публикацией и получением данных из 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>
    );
  }
  

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

Пожалуйста, смотрите приведенный ниже код. Дайте мне знать, если возникнут какие-либо проблемы с этим решением.

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

Обрабатывает данные поиска:

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