React Native搜索栏删除字符后无法重新过滤问题求助

问题根源 #

你当前的代码把**过滤后的pokemonDetails**传给了SearchBar作为搜索数据源，导致每次过滤后原始的完整宝可梦列表被覆盖。删除字符时，只能基于已经过滤过的子集再筛选，自然无法恢复显示全部3个宝可梦。

修复步骤 #

1. 在useFetchPokemons中保存原始完整列表
   确保自定义hook里同时存储原始的全部宝可梦数据，而不是只存过滤后的结果。修改hook内部逻辑：

   // useFetchPokemons.js 示例实现
   import { useState, useEffect } from 'react';
   
   const useFetchPokemons = () => {
     const [originalPokemonsList, setOriginalPokemonsList] = useState([]); // 保存原始完整数据
     const [pokemonDetails, setPokemonDetails] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [isError, setIsError] = useState(false);
   
     useEffect(() => {
       const fetchData = async () => {
         try {
           setIsLoading(true);
           // 替换成你的实际请求逻辑
           const response = await fetch('你的宝可梦数据接口');
           const data = await response.json();
           setOriginalPokemonsList(data); // 保存原始数据
           setPokemonDetails(data); // 初始化显示全部数据
         } catch (err) {
           setIsError(true);
         } finally {
           setIsLoading(false);
         }
       };
   
       fetchData();
     }, []);
   
     return {
       originalPokemonsList, // 导出原始列表
       pokemonDetails,
       setPokemonDetails,
       isLoading,
       isError,
       setIsLoading
     };
   };
   
   export default useFetchPokemons;
   

2. 修改Home组件传参
   把原始完整列表传给SearchBar，而不是过滤后的pokemonDetails：

   export default function Home() {
     // 解构出原始完整列表
     const { originalPokemonsList, pokemonDetails, setPokemonDetails, setIsLoading, isLoading, isError } = useFetchPokemons()
   
     return (
       <View style={{ padding: 10 }}>
         {/* 传入原始列表作为搜索数据源 */}
         <SearchBar setPokemonDetails={setPokemonDetails} pokemonsList={originalPokemonsList} />
         <FlatList
           data={pokemonDetails}
           keyExtractor={(item) => item.name}
           renderItem={({ item }) => <Card pokemon={item} />}
         />
       </View>
     );
   }
   

3. SearchBar组件无需修改
   现在SearchBar每次都会基于原始完整列表进行过滤，不管是输入还是删除字符，都会从全部数据里重新筛选，就能正确恢复显示所有匹配的宝可梦了。

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