可搜索的平面列表反应原生

Question

我正在尝试在平面列表中搜索项目，每当我在搜索栏中键入时，它只需要一个字母并关闭键盘，搜索栏中的值就会消失，

例如，当我输入“george”时，它只需要字母 g 并重新呈现包含字母 g 的名称列表并删除搜索栏中的内容

我该如何解决这个问题？

import React, { useState, useEffect } from 'react';
import { ScrollView } from 'react-native';
import { View, Text, FlatList, ActivityIndicator, SafeAreaView, TouchableOpacity } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { Divider, SearchBar } from 'react-native-elements'

const Item = ({ name, lastName }) => (
     <View>
          <Text style={{ fontSize: 17, color: '#666', marginBottom: 10 }}>Full name: {name} {lastName}</Text>
     </View>);

function Clients({ navigation }) {
     const [isLoading, setLoading] = useState(true);
     const usersApi = 'https://reqres.in/api/users'
     const [users, setUsers] = useState([]);
     const [search, setSearch] = useState("");
     const [masterData, setMasterData] = useState("");
     const fetchJson = async (userApi) => {
          const response = await fetch(userApi);
          return response.json()
     }

     useEffect(() => {
          fetchJson(usersApi)
               .then((users) => {
                    setUsers(users.data);
                    setMasterData(users.data);
               })
               .catch((error) => (alert(error)))
               .finally(() => setLoading(false));
     }, []);


     const itemSeparator = () => {
          return (
               <Divider style={{ width: "105%", marginVertical: 3, alignSelf: 'center' }} />
          )
     }

     const renderHeader = () => {
          return (
               <SearchBar
                    placeholder="Type Here..."
                    lightTheme
                    round
                    onChangeText={text => searchFilterFunction(text)}
                    autoCorrect={false}
               />
          );
     };

     const searchFilterFunction = text => {
          setSearch(text);

          const newData = masterData.filter(item => {
               const itemData = `${item.first_name.toUpperCase()} ${item.last_name.toUpperCase()}`;

               const textData = text.toUpperCase();

               return itemData.indexOf(textData) > -1;
          });

          setUsers(newData);
     };

     const renderItem = ({ item }) => (
          <TouchableOpacity style={{
               flex: 1,
               padding: 10
          }}
               onPress={() => { navigation.navigate('Client', { item: item }); }}
               underlayColor='#ccc'
               activeOpacity={0.1} >
               <Item name={item.first_name} lastName={item.last_name} />

          </TouchableOpacity>
     );
     console.log(search)
     console.log(users)
     return (
          <SafeAreaProvider>
               <SafeAreaView>


                    <Text style={{ color: '#666', margin: 15, fontSize: 20 }}>Clients actuels</Text>
                    <View style={{
                         width: '96%',
                         backgroundColor: 'white',
                         borderRadius: 5,
                         alignSelf: 'center',
                         marginTop: 20,
                    }}>
                         <View style={{ margin: 15 }}>
                              {isLoading ? <ActivityIndicator size="large" /> :

                                   <FlatList
                                        data={users}
                                        renderItem={renderItem}
                                        ItemSeparatorComponent={itemSeparator}
                                        ListHeaderComponent={renderHeader}
                                        keyExtractor={item => item.id.toString()}
                                        value={search}
                                   />}
                         </View>
                    </View>
               </SafeAreaView>
          </SafeAreaProvider>
     );
}
export default Clients;