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

Question

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

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>
  );
}

包含所有数据的数据库文件

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;

Answer 1

工作示例： Expo 链接

最终应用：

export default function Home() {
  const [search, setSearch] = useState('');

  const [masterDataSource, setMasterDataSource] = useState(DataBase);

  const { colors } = useTheme();

  let filteredDataSource = masterDataSource.filter((item) => item.name.includes(search))
  // 👆 do this instead of creating new state:

  const 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,
              padding: 10,
            },
          ]}
          placeholder="Sök"
          placeholderTextColor="#000"
          onChangeText={(text) => setSearch(text)}
          value={search}
        />
      </View>
      <View>
        <FlatList
          data={filteredDataSource}
          keyExtractor={(item, index) => index.toString()}
          initialNumToRender={1}
          showsVerticalScrollIndicator={false}
          renderItem={renderItem}
          style={{ height: 470 }}
        />
      </View>
    </View>
  );
}