如何通过搜索栏 React Native 搜索 FlatList？

Question

我有一个通过 Expo 构建的 React Native 应用程序，我想添加一个搜索功能来使用 React Native 中的搜索栏搜索 FlatList。下面的搜索栏来自 React Native Paper。

这是我的代码（App.js）：

constructor(props) {
    super(props);
    this.state = {
      dataSource: []
    }
  }

  state = {
    firstQuery: '',
  };

  componentDidMount() {
    const url = '// My URL'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        dataSource: responseJson.product
      })
    })
    .catch((error) => {
      console.log(error)
    })
  }

  state = {
    search: '',
  };

  updateSearch = search => {
    this.setState({ search });
  };

  SearchFilterFunction(text) {
    const newData = this.dataSource.filter(function(item) {
      const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      dataSource: newData,
      text: text,
    });
  }

render() {
    const { search } = this.state;
    const { firstQuery } = this.state;
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => {text => this.SearchFilterFunction(text)}}
        value={firstQuery} />

        <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem} /> 

    );
  }
}

我需要设置更多default state吗？ isLoading 或 error: null 是必要的吗？ 我做错了什么？

更新 这是我现在的 App.js：

constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      text: '',
      dataSource: []
    }; 
    this.arrayholder = [];
  }

  state = {
    firstQuery: '',
  };

  componentDidMount() {
    const url = '// My URL'
    fetch(url)
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson.product
      }, {
        function() {
          this.arrayholder = responseJson;
        }
      }
      )
    })
    .catch((error) => {
      console.log(error)
    })
  }

  state = {
    search: '',
  };

  updateSearch = search => {
    this.setState({ search });
  };

  SearchFilterFunction(text) {
    const newData = this.dataSource.filter(function(item) {
      const itemData = item.name ? item.name.toUpperCase() : ''.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });
    this.setState({
      dataSource: newData,
      text: text,
    });
  }

  renderItem = ({item}) => {
    return (
       // Code
    );
  }

  render() {
    return (
      <Searchbar
        placeholder="Search"
        onChangeText={query => {text => this.SearchFilterFunction(text)}}
        value={this.state.text} />
    );
  }

它给了我一个“不变违规：作为回调传递的无效参数”。期望一个函数。而是收到：[object Object]'

Answer 1

当您搜索时，您需要一把钥匙才能正确搜索。例如，如果您按地址搜索，

     <Searchbar
        placeholder="Search"
        onChangeText={{text => this.SearchFilterFunction(text)}}
        value={this.state.text} />

        <FlatList
        data={this.state.dataSource}
        renderItem={this.renderItem}
        keyExtractor={item => item.address}
        /> 

Answer 2

您需要告诉flatlist，如果ABC 状态变量发生变化，则在源中查找数据变化并重新渲染。没有这个，它不会使用新值。

所以，告诉你需要传递一个道具extraData，

<FlatList
    extraData={this.state.dataSource}
    data={this.state.dataSource}
    renderItem={this.renderItem} /> 

现在如果dataSource 有任何变化，flatlist 将重新渲染其内容