我想从本地API加载产品列表，使用页面，并在用户滚动时加载新产品，问题是当我想使用setProduct const [products, setProducts] = useState<ProductModel[]>([]);将新产品推送到产品列表时
这是加载产品的函数：

const getProductList = async () => {
    const token: string | null = await localStorage.getValue("token");

    console.log("page:", currentPage);
    if (currentPage >= maxNumberOfPages - 1) {
      setLoading(true);
      getAllProducts(token!, currentPage)
        .then((res) => {
          console.log(
            "res",
            res.data.numberOfElements,
            "totalPages: ",
            res.data.totalPages
          );
          if (products.length === 0) {
            setProducts(res.data.content);
            setCurrentPage(1);
            setMaxNumberOfPages(res.data.totalPages);
            setLoading(false);
          }
          if (products!.length > 0 && res.data.numberOfElements > 0) {
            setProducts([...products, res.data.content]); <== error happened here
            setCurrentPage(currentPage + 1);
            setLoading(false);
          }
        })
        .catch((error) => {
          console.log("get products error:", error);
        });
    }
  };

平面列表组件：

{products.length !== 0 ? (
        <FlatList
          data={products}
          renderItem={renderPrices}
          numColumns={1}
          // keyExtractor={(item) => item.id.toString()}
          ListFooterComponent={() =>
            loading ? (
              <View style={{ justifyContent: "center", alignItems: "center" }}>
                <Spinner size="giant" />
              </View>
            ) : null
          }
          nestedScrollEnabled={true}
          onEndReached={() => getProductList()}
          onEndReachedThreshold={0.1}
        />
      ) : (
        <View style={{ justifyContent: "center", alignItems: "center" }}>
          <Spinner size="giant" />
        </View>
      )}Ï

这个错误发生时，我试图setProducts([...products, res.data.content]);屏幕截图的问题：