已配置extraData的FlatList无法正确重置，新搜索出现重叠重复条目如何解决？

问题描述 #

补充说明：已配置extraData属性，但列表仍无法正常重置
我实现了一个搜索窗口，用户输入内容会触发简单API调用，返回的结果渲染在FlatList中（图1），该功能此前运行正常。但更新搜索查询词后，列表内的结果不再可以点击，长时间未定位到问题原因，后通过Flipper查看发现ViewGroup中存在残留的重复条目（图2）。


列表实际仅存在4个真实条目，无法点击的条目是对应正常条目的浅拷贝，如同覆盖在真实条目上方，暂未找到清除方法，每次执行搜索操作都会新增4条重复条目。
相关代码如下：

<View style={styles.container}>
  <TextInput
    autoFocus={true}
    style={styles.textInputField}
    onChangeText={input => {
      onChangeText(input);
    }}
    keyboardAppearance="dark"
    value={searchString}
  />
  <View style={styles.albumList}>
    <FlatList
      data={searchResults}
      keyExtractor={item => item.id}
      extraData={searchString}
      renderItem={({item}) => (
        <SearchResultsItem item={item} navigation={navigation} />
      )}
    />
  </View>
</View>;

解决方案 #

按以下优先级排查即可解决问题：

• 验证keyExtractor的唯一性：如果不同搜索返回的条目存在重复ID，FlatList会复用旧组件导致渲染残留。临时修改key规则为keyExtractor={item => ${searchString}-${item.id}}，强制不同搜索结果的条目key完全独立，验证是否是ID重复导致的问题。
• 修正searchResults的更新逻辑：如果更新搜索结果时没有生成新的数组引用（比如直接修改原数组后赋值），FlatList的data属性检测不到变化，不会触发完整重绘。确保每次搜索后赋值的是全新数组，例如使用setSearchResults([...newApiResult])而非直接修改原数组。
• 快速修复方案：给FlatList添加key属性绑定为搜索词，即<FlatList key={searchString} ... />，每次搜索词变化时FlatList会直接销毁旧实例重建，彻底清除所有残留条目，该方案对短列表的性能影响可以忽略。
• 排查条目组件问题：如果上述方案无效，将renderItem临时替换为纯文本组件测试，如果残留消失则说明SearchResultsItem内部存在未清理的副作用或状态泄漏，需要针对性排查组件内部逻辑。

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