React Native函数组件内删除列表项后无法重渲染FlatList并报Hooks使用错误

• Hook报错触发原因
  自定义HookuseForceUpdate的注释未书写完整，函数闭合的}符号遗漏了行首的//注释标记，导致原本封装在自定义Hook内部的useState调用残留到模块顶层作用域，违反React Hooks调用规则（Hooks仅可在函数组件、自定义Hook内部调用），最终抛出「Hooks can only be used in functional components」报错。
• 列表删除后不同步更新原因
  • 过滤后的列表数据存放于组件内部普通局部变量data中，不具备响应式特性，每次组件渲染时该变量都会被重新初始化为空数组，无法触发组件重渲染流程。
  • 删除操作仅向后端发送删除请求，未同步更新本地存储全量列表数据的filteredDataSource状态，React无法感知数据变更，自然不会触发FlatList重渲染。
  • 列表过滤逻辑在组件渲染阶段重复执行，且未做计算缓存，容易出现数据流不一致的问题。

1. 代码清理
   移除未注释完整的useForceUpdate残留代码，将模块顶层的非组件、非Hook代码全部清理，从根源上解决Hook调用位置错误的报错。
2. 数据流重构
   将过滤后的列表数据从普通局部变量，改为通过useMemo派生的响应式值，直接绑定到FlatList的data属性上，避免重复计算，保证数据流单向可追踪。
3. 删除逻辑优化
   封装删除流程，待后端删除接口请求成功后，通过setFilteredDataSource从本地状态中移除对应被删除的条目，利用React的状态更新机制触发组件重渲染，无需手动调用强制更新方法。

import React, { useEffect, useState, useMemo } from "react";
import { Alert, FlatList, StyleSheet } from "react-native";
import Swipeout from 'react-native-swipeout';
import ActivityIndicator from "../components/ActivityIndicator";
import Button from "../components/Button";
import Card from "../components/Card";
import colors from "../config/colors";
import listingsApi from "../api/listings";
import routes from "../navigation/routes";
import Screen from "../components/Screen";
import AppText from "../components/Text";
import useApi from "../hooks/useApi";
import useAuth from "../auth/useAuth";
import client from "../api/client";

// 完全清理掉残留的未完整注释的useForceUpdate代码，避免Hook跨作用域调用
function ListingsScreen({ navigation }) {
  const getListingsApi = useApi(listingsApi.getListings);
  const { user } = useAuth();
  const [filteredDataSource, setFilteredDataSource] = useState([]);

  // 原有拉取列表数据的逻辑保持不变
  useEffect(() => {
    fetch('http://192.168.1.6:9000/api/listings')
      .then((response) => response.json())
      .then((responseJson) => {
        setFilteredDataSource(responseJson);
      })
      .catch((error) => {
        console.error(error);
        alert("Couldn't retrieve the listings.")
      });
  }, []);

  // 用useMemo计算过滤后的列表数据，随依赖项变化自动更新
  const data = useMemo(() => {
    return filteredDataSource.filter(item => item.emailuser === user.email);
  }, [filteredDataSource, user.email]);

  // 封装删除逻辑，同步更新本地状态
  const handleDelete = async (itemId) => {
    try {
      await client.post("/listings/delete", { userId: itemId });
      // 从本地状态中移除被删除条目，触发组件重渲染
      setFilteredDataSource(prevList => prevList.filter(item => item._id !== itemId));
      alert("Listing Deleted Successfully");
    } catch (error) {
      alert("Delete operation failed, please try again");
    }
  };

  return (
    <Screen style={styles.screen}>
      {getListingsApi.error && (
        <>
          <AppText>Couldn't retrieve the listings.</AppText>
          <Button title="Retry" onPress={getListingsApi.request} />
        </>
      )}
      <ActivityIndicator visible={getListingsApi.loading} />

      <FlatList
        data={data}
        keyExtractor={(item) => item._id.toString()}
        renderItem={({ item }) => {
          const swipeSettings = {
            autoClose: true,
            right: [
              {
                onPress: () => {
                  Alert.alert(
                    'Alert',
                    'Are you sure you want to delete ?',
                    [
                      { text: 'No', onPress: () => console.log('Cancel Pressed'), style: 'cancel' },
                      { text: 'Yes', onPress: () => handleDelete(item._id) }
                    ]
                  );
                },
                text: 'Delete',
                type: 'delete',
              }
            ],
          };
          return (
            <Swipeout {...swipeSettings} backgroundColor="transparent" style={styles.btn}>
              <Card
                title={item.title}
                subTitle={"$" + item.price}
                category={item.categoryId}
                imageUrl={item.image}
                onPress={() => navigation.navigate(routes.LISTING_DETAILS, item)}
              />
            </Swipeout>
          );
        }}
      />
    </Screen>
  );
}

// 原有样式定义保持不变
const styles = StyleSheet.create({
  screen: {
    padding: 5,
    backgroundColor: colors.light,
  },
  btn: {
    flex: 1,
  }
});

export default ListingsScreen;

• 侧滑删除时，后端接口请求成功后，本地状态自动更新，FlatList会同步移除对应的条目，无需手动触发重渲染。
• 彻底解决Hook跨作用域调用的报错，满足React Hooks的使用规则。
• 过滤逻辑带缓存，避免每次渲染重复计算，降低不必要的性能消耗。

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