React Native 搜索栏问题答案

【问题标题】：React Native Search Bar IssuesReact Native 搜索栏问题
【发布时间】：2018-02-27 06:05:39
【问题描述】：

当我在 search Bar 上输入 A 时，它会给出结果集 1 当我在搜索栏上输入 Ap 时，它会给出结果集 2

当我输入 A ， Ap ，然后在搜索栏上退格到 A 时，它会给出结果集 2 而不是结果集 1

以下是我在 javascript 上的过滤方法。你能告诉我该怎么做吗？

工作：

  filter(text){     
     this.setState({ keywords: text })

     const newData = this.state.results.filter(function(item){
         const itemData = item.fruit_name.toUpperCase()
         const textData = text.toUpperCase()
         return itemData.indexOf(textData) > -1
     })

     if(text){
         this.setState({
            results: newData,
            text: text
         })
     }else{
        this.setState({
            results: this.state.oldresults,
            text: text
         })
     }   
 }

数据列表 UI：来自 react-native 的 FlatList，来自 NativeBase 的 ListItem

 <FlatList 
                  extraData={this.state}
                  data={this.state.results}
                  keyExtractor={(item, index) => item.id}
                  renderItem={( {item} ) => {
                      return <ListItem>

                        <Text>{item.fruit_name}</Text>

                    </ListItem>

数据来源：

https://reactnativecode.000webhostapp.com/FruitsList.php

【问题讨论】：

标签： react-native native-base

【解决方案1】：

您的问题是当您输入Ap 时，this.state.results 被过滤为set 2。而你backspace 到A 但this.state.results 仍在set 2 所以它不能回到set 1。如果你想要的话。您应该使用global 变量来保存结果并始终对其进行过滤，例如： `

 filter(text){
        this.setState({ keywords: text })
        const newData = globalOfResults.filter(function(item){
             ....
        }
    }

【讨论】：