React Native FlatList搜索栏异常：清空后产品列表消失求助

问题根源 #

你直接修改了存储完整产品列表的productst状态：初始时它是完整的ProductData，但每次搜索后用setProducts(filterData)将其替换为过滤后的子集，导致原始数据被永久覆盖。清空搜索栏时，你只能从已被过滤过的列表中再次筛选，自然无法恢复全部产品。

解决方案 #

分离原始数据和展示数据，用独立状态分别存储，同时给输入框绑定搜索文本状态，确保输入逻辑可控。

修改后的完整代码片段 #

const Home =()=>{
  // State
  const [categories, setCategories] = useState(categoryData)
  const [selected, setSelected] = useState(null)
  // 保存完整的原始产品列表（始终不修改）
  const [originalProducts, setOriginalProducts] = useState(ProductData)
  // 保存过滤后要展示的产品列表
  const [filteredProducts, setFilteredProducts] = useState(ProductData)
  // 绑定搜索输入框的文本状态
  const [searchText, setSearchText] = useState('')
 
  // 搜索函数：从原始数据中过滤，避免覆盖源数据
  function handleSearch(text){
    setSearchText(text)
    const filterData = originalProducts.filter((item)=>{
      return item.name.toLowerCase().includes(text.toLowerCase())
    })
    setFilteredProducts(filterData)
  }

  function renderHeader(){
    return(
      // Search Input 
      <View style={{ marginTop:SIZES.margin,}} >
        <TouchableOpacity 
          onPress={()=>{}} 
          style={{
            flexDirection:'row',
            alignSelf:'center',
          }}>
          <TextInput 
            placeholder=" Find Your Favourite..."
            placeholderTextColor={COLORS.lightGrey20}
            // 绑定输入框值，确保状态同步
            value={searchText}
            onChangeText={text=>handleSearch(text)}
          />
        </TouchableOpacity>
      </View>
    )
  }

  function renderCategories(){
    return(
      <View
        style={{
          marginTop:20,
        }}
      >
        <FlatList 
          horizontal
          showsHorizontalScrollIndicator={false}
          data={categories}
          keyExtractor={item=>item.id}
          renderItem={({item,index})=>{
            return(
              <TouchableOpacity  
                onPress={()=>onSelecteCategory(item)}>
                {/* 你的分类按钮内容 */}
              </TouchableOpacity>
            )
          }}
        />
      </View>
    )
  }

  // 渲染产品列表时使用filteredProducts作为数据源
  function renderProducts(){
    return(
      <FlatList
        data={filteredProducts}
        keyExtractor={item=>item.id}
        renderItem={({item})=>{
          // 你的产品项渲染逻辑
        }}
      />
    )
  }

  return(
    <View>
      {renderHeader()}
      {renderCategories()}
      {renderProducts()}
    </View>
  )
}

关键修改点 #

1. 拆分状态：用originalProducts保存完整的产品数据源，永远不修改它；filteredProducts仅存储当前需要展示的过滤结果。
2. 绑定输入框值：给TextInput添加value={searchText}，确保输入框内容与状态完全同步，清空操作能正确触发搜索逻辑。
3. 从原始数据过滤：每次搜索都基于originalProducts筛选，保证原始数据不被破坏，清空搜索时能返回全部产品。

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