当 React-Native 为空时，Filterbar 不会重置数据

Question

我正在通过从 asyncStorage 发布和获取数据以 react-native 制作应用程序，一切正常，我可以保存数据并获取它，但我无法正确设置过滤器栏。它只在一个方向上工作，例如，当我在输入中写一些东西时，我看到适合的结果，但是当我从输入中删除字符时，数据没有恢复正常，我什么也没看到 eventho filterBar 是空的，有没有人有建议如何解决？

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

当 React-Native 为空时，Filterbar 不会重置数据

Filterbar doesn't reset data when empty React-Native

filter

react-native

asyncstorage