Expo FlatList清空搜索栏后无法正确刷新加密货币列表问题

问题核心原因 #

出现这个问题本质是三个逻辑漏洞：

1. FlatList的data属性使用内联过滤逻辑，渲染时容易拿到过时的搜索状态闭包，快速删除输入内容时状态更新不同步
2. 过滤逻辑没有对空搜索关键词做单独边界处理，输入框清空后仍然执行了带残留关键词的匹配逻辑，没有切回全量数据源
3. 分页加载的列表数据和搜索过滤的数据源没有做隔离，过滤操作直接修改了原始全量列表，导致清空搜索后原始数据已经被污染

可直接落地的修复步骤 #

• 拆分独立的数据源状态
  不要只用一个state存列表数据，单独维护三个状态：
  • allCoins：存储所有分页拉取到的原始币种数据，只在分页加载、下拉刷新时追加/重置，永远不被搜索逻辑修改
  • displayCoins：存储FlatList实际渲染的列表数据，搜索过滤、分页更新时只修改这个状态
  • searchKeyword：存储搜索框输入的内容
• 重写搜索输入回调，优先处理空关键词场景
  把过滤逻辑从FlatList的data属性里移出来，放到搜索框的onChangeText回调中执行，首先判断输入值去除首尾空格后是否为空，为空直接把全量数据赋值给展示列表：

  const handleSearchInput = (text) => {
    setSearchKeyword(text);
    const keyword = text.trim().toLowerCase();
    // 输入为空时直接重置为全量列表，不执行过滤
    if (!keyword) {
      setDisplayCoins([...allCoins]);
      return;
    }
    // 非空时按币种名称、简称做模糊匹配
    const matchResult = allCoins.filter(coin => {
      return coin.name.toLowerCase().includes(keyword) || coin.symbol.toLowerCase().includes(keyword)
    });
    setDisplayCoins(matchResult);
  };
  

• 同步修正分页、下拉刷新的更新逻辑
  分页加载拉取到新的币种数据时，先把新数据拼接到allCoins里，再判断当前是否有搜索关键词：没有关键词就直接把更新后的全量数据赋值给displayCoins，有关键词就基于新的全量数据重新执行一遍搜索过滤，再更新displayCoins，避免新加载的数据不展示。下拉刷新重置列表时逻辑同理。
• 修正FlatList配置避免渲染复用异常
  给FlatList配置唯一的keyExtractor，不要用数组索引作为key，使用币种本身的唯一id（比如接口返回的coinId、合约地址）作为key，防止数据切换时列表组件复用旧节点导致展示错乱：

  <FlatList
    data={displayCoins}
    keyExtractor={item => String(item.id)}
    renderItem={renderCoinItem}
    // 原有下拉刷新、上拉加载的配置保持不变即可
    refreshing={isRefreshing}
    onRefresh={handlePullRefresh}
    onEndReachedThreshold={0.2}
    onEndReached={loadMoreData}
  />
  

避坑提示 #

不要在FlatList的data属性中写内联过滤表达式，比如data={keyword ? allCoins.filter(...) : allCoins}。React的状态更新是异步批处理的，快速输入、删除内容时，内联逻辑很容易捕获到旧的keyword值形成闭包陷阱，这也是大部分人搜索清空后列表异常的核心诱因。

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