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

Posted 2023-02-19

【中文标题】如何通过搜索栏 React Native 搜索 FlatList？

【英文标题】：How to search a FlatList via Search Bar React Native?

【发布时间】：2019-11-26 22:14:21

【问题描述】：

我有一个通过 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]'

【参考方案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
        /> 

【参考方案2】：

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

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

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

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

【讨论】：

在 setState 的回调中你能记录你的数据源吗，是否存在正确的值？。

是的。只是搜索功能没有渲染匹配结果