React Native搜索框每次输入后自动关闭问题求助

你的核心问题出在防抖函数未持久化以及useEffect依赖缺失，导致组件重渲染时防抖逻辑失效，加上状态控制的小问题，最终引发异常。以下是针对性修复：

1. 持久化防抖函数 #

组件每次重渲染时，debouncedFetchData都会被重新创建，导致防抖失效，还会触发useEffect重复执行。用useCallback包裹防抖逻辑，确保函数引用稳定：

import { useCallback } from 'react';
import debounce from 'lodash.debounce'; // 假设使用lodash的debounce实现

// 持久化防抖函数，避免每次渲染重建
const debouncedFetchData = useCallback(
  debounce((query, cb) => {
    fetchData(query, cb);
  }, 300),
  [] // 空依赖，确保函数仅初始化一次
);

// 优化fetchData的异步写法
const fetchData = async (query, cb) => {
  const items = await returnUnSortedWorkouts(query);
  cb(items);
};

2. 完善useEffect的依赖与清理逻辑 #

• 把debouncedFetchData加入useEffect依赖数组，保证依赖完整性
• 添加清理函数，取消未完成的防抖请求，避免组件卸载后执行setState引发内存泄漏

useEffect(() => {
  // 处理空搜索关键词的情况
  if (!searchKey.trim()) {
    setDataSet([]);
    setsearching(false);
    return;
  }

  setsearching(true); // 开始搜索时立即标记为搜索中，优化用户体验
  debouncedFetchData(searchKey, (d) => {
    const groups = d.map(y => ({
      id: y.id,
      name: y.name,
      thumbnail: y.thumbnail,
    }));
    setDataSet(groups);
    setsearching(false);
  });

  // 清理函数：取消未执行的防抖请求
  return () => debouncedFetchData.cancel();
}, [searchKey, debouncedFetchData]); // 添加debouncedFetchData到依赖列表

3. 优化FlatList与状态控制 #

• 移除{!searching && ...}的条件渲染，改用searching控制加载状态（比如显示加载指示器），避免FlatList频繁挂载卸载
• 不要用index作为keyExtractor，改用item的唯一id，减少FlatList不必要的重渲染

// 搜索栏部分保留，调整FlatList逻辑
<SearchBar
  onChangeText={(e) => setSearchKey(e)}
  autoFocus
  defaultValue={searchKey}
  style={[
    { width: '100%' },
    tailwind('my-2'),
  ]}
/>

{/* 始终渲染FlatList，用searching控制空状态/加载状态 */}
<FlatList
  style={{ width: '100%' }}
  data={dataSet}
  keyExtractor={(item) => item.id.toString()} // 使用item的唯一ID
  ListEmptyComponent={() => (
    <View style={tailwind('flex-1 items-center justify-center py-8')}>
      {searching ? (
        <ActivityIndicator size="large" />
      ) : (
        <Text>No results found</Text>
      )}
    </View>
  )}
  renderItem={({ item }) => (
    <View style={tailwind(`mt-[7px]`)}>
      <RecommendedWorkout
        navigation={navigation}
        id={item.id}
        // 其他属性
      />
    </View>
  )}
/>

额外注意 #

• 确保returnUnSortedWorkouts函数本身没有重复请求的逻辑问题
• 如果使用自定义防抖实现，要确保其支持cancel方法（lodash的debounce自带该方法）

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