React Native Cloud Firestore搜索后无法再次加载数据问题求助

核心问题在于你每次搜索时直接用过滤后的结果覆盖了原始数据源daftar：

• 第一次搜索后，daftar变成符合条件的子集
• 第二次搜索只能在这个子集里过滤，找不到匹配项就会显示空数据
• 返回页面再进入时，应该是重新从Firestore拉取了完整原始数据，所以能再执行一次搜索

修复步骤 #

1. 新增状态存储原始全量数据，避免过滤操作污染数据源
2. 搜索时基于原始数据过滤，而非当前已过滤的结果
3. 绑定输入框的value到search状态，保证输入框值与状态同步

修改后的代码示例 #

const nameList = () => {
  // 存储从Firestore获取的原始全量数据
  const [originalDaftar, setOriginalDaftar] = useState<any>([]);
  // 存储过滤后的展示数据
  const [daftar, setDaftar] = useState<any>([]);
  const [search, setSearch] = useState<any>('');

  // 从Firestore拉取原始数据的逻辑（示例）
  useEffect(() => {
    const fetchData = async () => {
      const snapshot = await firebase.firestore().collection('your-collection').get();
      const data = snapshot.docs.map(doc => doc.data());
      setOriginalDaftar(data);
      setDaftar(data); // 初始化展示全量数据
    };
    fetchData();
  }, []);

  const searchName = (input) => {
    setSearch(input);
    // 基于原始全量数据执行过滤
    let searchData = originalDaftar.filter((item) => {
      return (
        item?.name.toLowerCase().includes(input.toLowerCase()) ||
        item?.address?.toLowerCase().includes(input.toLowerCase())
      );
    });
    setDaftar(searchData);
  };

  return (
    <Div flex={1} bg="#fff">
      <Div py={heightPercentageToDP(1)} px={heightPercentageToDP(2)}>
        <Input
          focusBorderColor={PRIMARY_COLOR}
          placeholder="Search..."
          onChangeText={(val) => searchName(val)}
          value={search} // 绑定输入框值到状态
        />
      </Div>
      {/* 此处渲染daftar列表内容 */}
    </Div>
  );
};

关键改动说明 #

• 拆分originalDaftar和daftar两个状态，原始数据仅在初始化时更新，过滤操作不会修改它
• 搜索逻辑始终基于originalDaftar，确保每次搜索都有完整数据集可用
• 绑定输入框value，避免输入状态不一致导致的异常

内容的提问来源于stack exchange，提问作者Michael