使用react native从aws数据存储查询购物车项目时的无限循环

Question

我正在从AWS数据存储中获取数据，当从数据存储中获取购物车项目数据时存在无限循环。我不知道这个循环是怎么来的。我试图用useCallback包装fetchCartItems函数，也从useEffect钩子中删除了依赖关系，但没有任何改变。当我控制台记录cartProducts时，我得到了这个无限循环。

这是购物车条目上下文

import React, {
useState,
useEffect,
useContext,
createContext,
useCallback,
} from "react";
import { DataStore } from "aws-amplify";
import { CartItems } from "../src/models";
import { useAuthContext } from "./AuthContext";
const CartContext = createContext({});
const CartContextProvider = ({ children }) => {
const [cartProducts, setCartProducts] = useState([]);
const { authUser } = useAuthContext();
const [quantity, setQuantity] = useState("");
// console.log(cartProducts)
const addToCart = async (item) => {
try {
const foundCartItem = await DataStore.query(CartItems, (i) =>
i.productId("eq", item.id)
);
if (foundCartItem.length === 0) {
await DataStore.save(
new CartItems({
userId: authUser.attributes.sub,
productId: item.id,
productPrice: item.price,
productTitle: item.title,
productImage: item.image,
quantity: quantity,
})
);
} else {
return;
}
} catch (error) {
console.log("Error is: ", error);
}
};
const fetchCartItems = async () => {
try {
const cartData = await DataStore.query(CartItems, (user) =>
user.userId("eq", authUser.attributes.sub)
);
setCartProducts(cartData);
} catch (error) {
console.log("Error: ", error);
}
};
const onRemove = async(deleteProduct)=>{
const original = await DataStore.query(CartItems, deleteProduct)
if(original.quantity > 1){
await DataStore.save(CartItems.copyOf(original, updated=>{
updated.quantity -=  1}))
} else{
const deletedItem = await DataStore.query(CartItems, deleteProduct)
await DataStore.delete(deletedItem);
}
}
const clearCart = async ()=>{
let cartItemsArr = [];
for(let i in cartProducts){
cartItemsArr.push(cartProducts[i])
const deleteItemData = await DataStore.query(CartItems, cartItemsArr[i].id)
await DataStore.delete(deleteItemData);
}
}
useEffect(() => {
fetchCartItems();
}),
[addToCart, quantity, ];
return (
<CartContext.Provider
value={{
cartProducts,
setCartProducts,
addToCart,
quantity,
setQuantity,
onRemove,
clearCart
}}
>
{children}
</CartContext.Provider>
);
};
export default CartContextProvider;
export const useCartContext = () => useContext(CartContext);

这是购物车项目屏幕

import React from "react";
import {
View,
Text,
Image,
StyleSheet,
FlatList,
TouchableOpacity,
} from "react-native";
import ItemQuantity from "../../component/ItemQuantity";
import Colors from "../../constants/Colors";
import { useCartContext } from "../../contexts/CartContext";
const CartItem = () => {
const navigation = useNavigation();
const { cartProducts, onRemove} = useCartContext();
const { createNewOrder } = useOrderContext();
const cartItems=[];
for(const key in cartProducts){
cartItems.push(cartProducts[key])
}
let totalPrice = 0;
for(const i in cartItems){
totalPrice += cartItems[i].productPrice * cartItems[i].quantity;
}

return(
<View style={styles.container}>
<View style={styles.totalAmount}>
<Text style={styles.totalText}>الإجمالي:{'  '}<Text style={styles.subtotal}>
{totalPrice.toFixed(2)} ج.م </Text></Text>
<Button 
onPress={()=>{createNewOrder(totalPrice), navigation.navigate("OrderItems")}}
disabled={cartItems.length === 0} 
color={Colors.accent} title="اطلب"/>
</View>
<FlatList data={cartItems} renderItem={({item})=>{
return(
<Cart_Item 
quantity={item.quantity} 
title={item.productTitle} 
amount={item.productPrice} 
deletable
onRemove={()=>{onRemove(item.id)}}
/>
)
}}/>
</View>
);
};
const styles = StyleSheet.create({
screen: {
margin: 20,
},
});

Answer 1

这里的问题是，您将useEffect的依赖项放在初始化钩子之后。

useEffect(() => {
fetchCartItems();
}),
[addToCart, quantity];

fetchCartItems在每次渲染时都被调用，因为钩子没有依赖关系(甚至没有一个空数组使它被调用一次)，并且在每次调用时它都会编辑状态，重新渲染dom并再次调用自己。

addToCart不应该在你的useEffect的依赖，因为它是一个函数，你从来没有改变你的代码。试一试:

useEffect(() => {
fetchCartItems();
}, [quantity]);