React Native 如何为平面列表制作搜索栏？

Question

我整天都在尝试创建一个搜索栏。 我终于找到了这个看起来不错的指南： https://blog.jscrambler.com/add-a-search-bar-using-hooks-and-flatlist-in-react-native/ 。 我使用我自己的 API 来跟踪它，我没有得到任何错误，但本教程中的代码似乎未完成。

这是我所拥有的：

import React, { useEffect, useState } from 'react';
import { View, Text, FlatList, SafeAreaView, TextInput } from 'react-native';
import { Card, Header } from 'react-native-elements'
import { styles } from './styles.js';
import filter from 'lodash.filter';

const FormsScreen = ({navigation, route}) => {

  const [isLoading, setIsLoading] = useState(false);
  const [data, setData] = useState([]);
  const [query, setQuery] = useState('');
  const [fullData, setFullData] = useState([]);
  
  //Fetch all users from database
  useEffect(() =>{
    setIsLoading(true);
    fetch('http://10.0.2.2:5000/forms').then(response =>{
      if(response.ok){
        return response.json();
      }
    }).then(data => setFullData(data)).then(setIsLoading(false));
  }, []);


  function renderHeader() {
    return (
      <View
        style={{
          backgroundColor: '#fff',
          padding: 10,
          marginVertical: 10,
          borderRadius: 20
        }}
      >
        <TextInput
          autoCapitalize="none"
          autoCorrect={false}
          clearButtonMode="always"
          value={query}
          onChangeText={queryText => handleSearch(queryText)}
          placeholder="Search"
          style={{ backgroundColor: '#fff', paddingHorizontal: 20 }}
        />
      </View>
    );
  }

  const handleSearch = text => {
  const formattedQuery = text.toLowerCase();
  const filteredData = filter(fullData, form => {
    return contains(form, formattedQuery);
  });
  setData(filteredData);
  setQuery(text);
};

const contains = ({ ID }, query) => {
  console.log("ID was: "+ID);
  console.log("Query was: "+query);
  const id = ID;
  console.log('id was: '+id);
  if (id.toString().includes(query)) {
    return true;
  }

  return false;
};





  if (isLoading) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" color="#5500dc" />
      </View>
    );
  }
  else{
  return (

      <SafeAreaView>
        <Header
          leftComponent={{ icon: 'menu', color: '#fff' }}
          centerComponent={{ text: 'Request Forms', style: { color: '#fff', fontSize: 25} }}
          rightComponent={{ icon: 'home', color: '#fff' }}
        />
   
        <FlatList 
        ListHeaderComponent={renderHeader}
        keyExtractor={(item) => item.ID.toString() }
        data={fullData}
        renderItem={({item}) => (
          <Card>
            <Card.Title>{item.ID}</Card.Title>
            <Card.Divider/>
            <View style={styles.Container}>
              <Text>{item.Comments}</Text>
              {/* <Image source={require('./System apps/Media Manager/Gallery/AppPhotos/45e5cefd-7798-4fe9-88de-86a0a15b7b9f.jpg')} /> */}
              <Text>{item.RoadName}</Text>
            </View>

            <View style={styles.ListContainer}>
              <Text style={styles.LabelText}>Name</Text>
              <Text style={styles.LabelText}>Phone</Text>
              <Text style={styles.LabelText}>Email</Text>
            </View>
            <View style={styles.ListContainer}>
              <Text style={styles.CardText}>{item.Name}</Text>
              <Text style={styles.CardText}>{item.Phone}</Text>
              <Text style={styles.CardText}>{item.Email}</Text>
            </View>
          </Card>
        )}
        />
     </SafeAreaView>

  );
  } 
}

export default FormsScreen;

我在这里有两个主要问题。

1.) 本教程让我初始化数据和 setData。 setData 被调用，在我看来这是搜索后的最终结果。 问题是作者从未实际使用过可变data ，所以我该怎么处理它？ 现在，无论发生什么，该列表都不会改变。

2.) 我知道他使用的是不同的 API，所以我只搜索 ID，而不是通过名字、姓氏和 Email 进行过滤。 在本教程的这一部分：

const contains = ({ name, email }, query) => {
  const { first, last } = name;

  if (first.includes(query) || last.includes(query) || email.includes(query)) {
    return true;
  }

  return false;
};

此代码如何将first和last与数据中的名字和姓氏值相关联？ 当我使用此代码但将name替换为ID并因此first使用id时， query的值是正确的（例如 19），但ID的值是 2040，这不是我要查找的值，但 2040 是最后一个 ID数据库，或者换句话说，最近输入的行。

这是我的数据样本供参考：

任何帮助是极大的赞赏。

Answer 1

请将data={fullData}更新为data={query? data: fullData} 平面列表道具中的data={query? data: fullData} 。 每当搜索查询更新时，这应该会显示您过滤的数据。