我正在尝试根据搜索栏文本搜索平面列表。我遇到的问题是，当用户输入错误时……说他们想输入“burger”，但错误地输入了“burget”，然后它应该返回任何内容。当用户删除“t”时，它应该再次重新呈现平面列表，最后一个文本与“burge”部分匹配。

注意:使用 react-native-elements 搜索栏，它允许我仅使用 e 或 event 调用文本。

我目前在 Main.js 文件中的内容:

searchText = (e) => {
    let text = e.toLowerCase();
    let trucks = this.state.data;

    // search by food truck name
    let filteredName = trucks.filter((truck) => {
      return truck.name.toLowerCase().match(text); 
    });

    // if no match and text is empty
    if(!text || text === '') {
      console.log('change state');
        this.setState({
          data: initial
        });
      }
    // if no name matches to text output
    else if(!Array.isArray(filteredName) && !filteredName.length) {
      console.log("not name");
      this.setState({
        data: [],
      });
    }
    // if name matches then display
    else if(Array.isArray(filteredName)) {
      console.log('Name');
      this.setState({
        data: filteredName,
      });
    }
   };

<View style={styles.container}>
  <SearchBar
    round
    lightTheme
    containerStyle={styles.search}
    ref="search"
    textInputRef="searchText"
    onChangeText={this.searchText.bind(this)}
    placeholder='Search by Truck Name...'
   />
   <TruckList getTruck={(truck) => this.setTruck(truck)} truckScreen={this.truckScreen} data={this.state.data}/>
</View>

然后是 TruckList.JS:

export default class TruckList extends Component {
    // rendering truck screen
    renderTruckScreen = (item) => {
        this.props.truckScreen();
        this.props.getTruck(item);
    }

    render() {
        return(
            <List style={styles.list}>
                <FlatList
                    data={this.props.data}
                    renderItem={({ item }) => (
                        <ListItem
                            roundAvatar
                            avatar={{uri: item.pic1}}
                            avatarStyle={styles.avatar}
                            title={item.name}
                            titleStyle={styles.title}
                            subtitle={
                                <View style={styles.subtitleView}>
                                    <Text style={styles.subtitleFood}>{item.food}</Text>
                                    <View style={styles.subtitleInfo}>
                                        <Icon 
                                            name="favorite"
                                            size={20}
                                            color={"#f44336"}
                                            style={styles.subtitleFavorite}
                                        />
                                        <Text style={styles.subtitleFavoriteText}>{item.favorited} favorited</Text>
                                    </View>
                                </View>
                            }
                            onPress={() => this.renderTruckScreen(item)}
                        />
                    )}
                    keyExtractor={(item) => item.uid}
                    ListFooterComponent={this.footer}
                />
            </List>
        )
      }
    }

我试过其他几种方法都无济于事。此外，我看到的唯一适用于 React Native 的解决方案是使用 ListView，它会及时贬值。所以我正在尝试使用新的 FlatList 组件来做到这一点。

感谢您的帮助!

最佳答案

我今天在尝试在新的 FlatList 组件上实现过滤器/搜索功能时遇到了同样的问题。这就是我设法解决它的方法:

通过在父组件的状态下创建另一个名为 noData 的项，您可以在没有匹配您的搜索的结果时将其设置为 true，然后有条件地呈现您的 FlatList。

我的实现与你的略有不同，但如果我必须调整你的代码，它看起来像这样:

搜索文本功能:

searchText = (e) => {
    let text = e.toLowerCase()
    let trucks = this.state.data
    let filteredName = trucks.filter((item) => {
      return item.name.toLowerCase().match(text)
    })
    if (!text || text === '') {
      this.setState({
        data: initial
      })
    } else if (!Array.isArray(filteredName) && !filteredName.length) {
      // set no data flag to true so as to render flatlist conditionally
      this.setState({
        noData: true
      })
    } else if (Array.isArray(filteredName)) {
      this.setState({
        noData: false,
        data: filteredName
      })
    }
  }

然后将 noData bool 值传递给您的 TruckList 组件:

<TruckList getTruck={(truck) => this.setTruck(truck)} 
truckScreen={this.truckScreen} data={this.state.data} noData={this.state.noData}/>

然后仅当有结果时才在 TruckList 组件中呈现您的 FlatList:

<List style={styles.list}>
{this.props.noData ? <Text>NoData</Text> : <FlatList {...} />}         
</List>

然后它应该负责处理用户输入错误——因为一旦没有结果它就会重新呈现平面列表，并且会在您删除输入错误时记住之前的搜索状态。

如果有帮助，请告诉我!

关于javascript - 在 FlatList 上使用 React Native 搜索过滤器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45666762/