Javascript 尝试使用textinput搜索内容后，Flatlist数据消失

在我的应用程序中，有一个文本输入和一个平面列表，数据位于本地文件中，而不是来自服务器。问题是，当我搜索某个内容时，平面列表中的数据会消失，要让数据再次显示，唯一的方法是重新加载应用程序。代码有什么问题？ 这就是我对代码的理解程度

import React, { useState, useEffect } from 'react';
import {
  View,
  TextInput,
  StyleSheet,
  FlatList,
  Text,
  TouchableOpacity,
} from 'react-native';
import { useTheme } from '../Data/ThemeContext';
import DataBase from '../Data/DataBase';

export default function Home() {
  const [search, setSearch] = useState('');
  const [filteredDataSource, setFilteredDataSource] = useState(DataBase);
  const [masterDataSource, setMasterDataSource] = useState([]);

  const { colors } = useTheme();

  const searchFilterFunction = (text) => {
    if (text) {
      const newData = masterDataSource.filter(function (item) {
        const itemData = item.name ? item.name : '';
        const textData = text;
        return itemData.indexOf(textData) > -1;
      });
      setFilteredDataSource(newData);
      setSearch(text);
    } else {
      setFilteredDataSource(masterDataSource);
      setSearch(text);
    }
  };

  renderItem = ({ item }) => {
    return (
      <TouchableOpacity
        style={{
          margin: 15,
          borderWidth: StyleSheet.hairlineWidth,
          padding: 10,
          borderRadius: 10,
          borderColor: colors.text,
        }}
        onPress={() => getItem(item)}>
        <Text style={{ color: colors.text, fontWeight: '700' }}>
          {item.name}
        </Text>
        <Text style={{ color: colors.text }}>{item.company}</Text>
        <Text style={{ color: colors.text }}>{item.gluten}</Text>
      </TouchableOpacity>
    );
  };

  const getItem = (item) => {
    alert(item.extra);
  };

  return (
    <View style={{ flex: 1, backgroundColor: colors.background }}>
      <View
        style={{
          flexDirection: 'row',
          justifyContent: 'center',
          alignItems: 'center',
          padding: 30,
        }}>
        <TextInput
          style={[
            {
              flex: 1,
              backgroundColor: '#fff',
              borderRadius: 10,
              shadowColor: '#888888',
              shadowOffset: { width: 0, height: 1 },
              shadowOpacity: 0.8,
              shadowRadius: 2,
              elevation: 3,
            },
          ]}
          placeholder="Sök"
          placeholderTextColor="#000"
          onChangeText={(text) => searchFilterFunction(text)}
          value={search}
        />
      </View>
      <View>
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          initialNumToRender={1}
          showsVerticalScrollIndicator={false}
          renderItem={renderItem}
          style={{ height: 470 }}
        />
      </View>
    </View>
  );
}

工作示例：

最终应用程序：

导出默认函数Home（）{
const[search，setSearch]=useState（“”）；
const[masterDataSource，setMasterDataSource]=useState（数据库）；
const{colors}=useTheme（）；
让filteredatasource=masterDataSource.filter（（项）=>item.name.includes（搜索））
//
const DataBase = [
  {
    name: 'text text text text',
    company: 'text text text text',
    
  },
  {
    name: 'text text text text',
    company: 'text text text text',
    
  },
  {
    name: 'text text text text',
    company: 'text text text text',
  },
];

export default DataBase;