我是新的React Native和面临的问题与Lodesh过滤器。它是给中间字符串数据。例如，如果我想搜索三菱，并开始键入"米"，它不会给我三菱，但如果我开始键入"子"，然后它给我三菱。
下面是我的代码：

import React, { useEffect, useState }  from 'react';
import {View, Text, Button, TextInput, FlatList, ActivityIndicator, StyleSheet, Image} from 'react-native';
import filter from 'lodash.filter';

    const CarList = () => {
        const [isLoading, setIsLoading] = useState(false);
        const [data, setData] = useState([]);
        const [error, setError] = useState(null);
        const [query, setQuery] = useState('');
        const [fullData, setFullData] = useState([]);
       
        useEffect(() => {
            setIsLoading(true);
          
            fetch(`https://myfakeapi.com/api/cars/?seed=1&page=1&results=20`)
              .then(response => response.json())
              .then(response => {
                setData(response.cars);
                setFullData(response.cars);
          
                setIsLoading(false);
              })
              .catch(err => {
                setIsLoading(false);
                setError(err);
              });
          }, []);
    
          if (isLoading) {
            return (
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <ActivityIndicator size="large" color="#5500dc" />
              </View>
            );
          }
        
          if (error) {
            return (
              <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text style={{ fontSize: 18}}>
                  Error fetching data... Check your network connection!
                </Text>
              </View>
            );
          }
    
        const handleSearch = text => {
            const formattedQuery = text.toLowerCase();
            const filteredData = filter(fullData, user => {
                console.log(contains(user, formattedQuery));
              return contains(user, formattedQuery);
            });
            setData(filteredData);
            setQuery(text);
          };
          
          const contains = ({ car, car_model,car_color }, query) => {
          
            if (car.includes(query) || car_model.includes(query) || car_color.includes(query)) {
              return true;
            }
          
            return 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>
            );
          }
      
        return (
         
          
            <View style={styles.container}>
          <Text style={styles.text}>Favorite Contacts</Text>
          <FlatList
           ListHeaderComponent={renderHeader}
            data={data}
            keyExtractor={({ id }) => id}
            renderItem={({ item }) => (
              <View style={styles.listItem}>
                <Image
                    source={{
                        uri: 'https://picsum.photos/200',
                      }}
                  style={styles.coverImage}
                />
                <View style={styles.metaInfo}>
                  <Text style={styles.title}>{`${item.car} ${
                    item.car_model
                  }`}</Text>
                </View>
              </View>
            )}
          />
        </View>
          
        );
    
     
    }