如何解决FlatList删除或筛选数据后自动滚动到顶部的问题

问题核心：你给FlatList设置了key={data.length}，每次删除条目后data长度变化，key值跟着改变，React会完全卸载并重新创建FlatList组件，导致滚动位置重置到顶部。

解决步骤： #

1. 移除FlatList的key={data.length}属性
   不需要靠这个key强制触发重新渲染，FlatList会根据data的变化自动更新，加上你已经正确配置了keyExtractor，能准确识别列表项的增删，所以直接删掉这个key即可。

2. （可选）手动维护滚动位置（若移除key后仍有异常）
   如果移除key后还是偶尔出现滚动偏移，可通过监听滚动位置、删除后恢复的方式处理：

   // 新增ref和状态保存滚动位置
   const flatListRef = useRef(null);
   const [currentScrollY, setCurrentScrollY] = useState(0);
   
   // 监听滚动事件，记录当前位置
   const onScrollHandler = (e) => {
     setCurrentScrollY(e.nativeEvent.contentOffset.y);
   };
   
   // 修改删除函数，删除后恢复滚动位置
   const deleteItemById = (entry) => {
     const filteredData = data.filter(item => item.id !== entry.id);
     setNotificationData(filteredData);
     // 恢复之前的滚动位置
     flatListRef.current?.scrollToOffset({ offset: currentScrollY, animated: false });
   };
   
   // 更新FlatList属性
   <FlatList
     ref={flatListRef}
     onScroll={onScrollHandler}
     scrollEventThrottle={16} // 确保实时获取滚动位置
     // 保留你原有的其他属性...
   />
   

3. 优化冗余代码（可选）
   你目前的删除按钮里重复写了API调用逻辑，可以和deleteItemById整合，减少重复：

   const deleteItemById = async (entry) => {
     const notificationToken = globalVariable.token;
     try {
       await axios.delete(`${BASE_URL}${entry.id}`, {
         headers: { Authorization: notificationToken }
       });
       const filteredData = data.filter(item => item.id !== entry.id);
       setNotificationData(filteredData);
     } catch (err) {
       console.error(err);
     }
   };
   
   // 按钮 onPress 直接调用
   <IconButton
     onPress={() => deleteItemById(data)}
     // 其他属性...
   />
   

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