我想從本地 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]); 截取問題的螢屏截圖時發生此錯誤：
uj5u.com熱心網友回復：
嘗試這個：
setProducts([...products, ...res.data.content])
確保你也在傳播第二個陣列。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/534855.html