如何在React Native中配置搜索栏实现FlatList数据检索功能

存在的问题 #

• 函数组件混用类组件状态语法：函数组件不能用this.setState更新状态，也不能直接声明对象作为响应式状态，需要使用useState Hook实现状态管理。
• 过滤数据源为空：状态中声明的dishesData初始值为空，没有绑定导入的源数据，过滤逻辑没有可用数据。
• 列表未绑定过滤后数据：FlatList的data属性始终绑定原始数据源，搜索后的过滤结果不会同步到列表。
• 大小写匹配不友好：默认大小写敏感的匹配逻辑不符合普通用户的搜索习惯。

修复后代码 #

import React, { useState } from 'react';
import { StyleSheet, FlatList, View, TouchableOpacity, Image, Text } from 'react-native';
import { dishesData } from './DishesData';
import { SearchBar } from 'react-native-elements'

const MenuListScreen = ({ navigation }) => {
  // 声明响应式状态
  const [searchText, setSearchText] = useState("");
  const [filteredData, setFilteredData] = useState(dishesData);

  const search = (inputText) => {
    setSearchText(inputText);
    // 转换为小写实现大小写不敏感搜索
    const formatInput = inputText.toLowerCase();
    const result = dishesData.filter(item => 
      item.description.toLowerCase().includes(formatInput)
    );
    setFilteredData(result);
  };

  return (
    <View style={styles.container}>
      <SearchBar
        round={true}
        lightTheme={true}
        placeholder="Search..."
        autoCapitalize='none'
        autoCorrect={false}
        onChangeText={search}
        value={searchText}
      />

      <FlatList 
        style={styles.list}
        contentContainerStyle={styles.listContainer}
        // 绑定过滤后的数据源
        data={filteredData}
        horizontal={false}
        numColumns={1}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => {
          return (
            <TouchableOpacity
              onPress={() => navigation.navigate('MenuDetail', { id: item.id })}
            >
              <Image
                style={styles.userImage}
                source={{ uri: item.imageSource }}
              />
              <View style={styles.cardFooter}>
                <View style={{ alignItems: "center", justifyContent: "center" }}>
                  <Text style={styles.name}>{item.title}</Text>
                  <Text style={styles.position}>{item.price}</Text>
                </View>
              </View>
            </TouchableOpacity>
          )
        }} 
      />
    </View>
  );
};

// 原有样式代码保持不变即可
const styles = StyleSheet.create({})

内容的提问来源于stack exchange，提问作者kathir