使用本機反應從 aws dataStore 查詢數據時出現無限循環

Question

我正在從 AWS DataStore 獲取數據，從 DataStore 獲取購物車商品數據時存在無限循環。 我不知道這個循環是從哪里來的。 我試圖用 useCallback 包裝 fetchCartItems function，還從 useEffect 掛鈎中刪除了依賴項，但沒有任何改變。 當我控制台記錄購物車產品時，我得到了這個無限循環。

這是購物車項目上下文

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);
    }
  };

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

  return (
    <CartContext.Provider
      value={{
        cartProducts,
        setCartProducts,
        addToCart,
        quantity,
        setQuantity,
      }}
    >
      {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 { cartProducts } = useCartContext();

  return (
    <View style={styles.screen}>
      <FlatList
        data={cartProducts}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              <View style={styles.cardView}>
                <View style={styles.imageView}>
                  <Image
                    style={styles.image}
                    source={{ uri: item.productImage }}
                  />
                </View>
                <View style={styles.detailsView}>
                  <Text style={styles.titl}>{item.productTitle}</Text>
                  <Text style={styles.price}>{item.productPrice} ج.م </Text>
                </View>
              </View>
              <ItemQuantity
                updatedItemId={item.id}
                quantityItem={item.quantity}
              />
            </View>
          );
        }}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  screen: {
    margin: 20,
  },
});

Answer 1

這里的問題是您在初始化鈎子之后放置了useEffect的依賴項。

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

每次渲染都會調用fetchCartItems ，因為該鈎子沒有依賴項（甚至沒有一個空數組使其被調用一次），並且在每次調用時它都會編輯 state，重新渲染 dom 並再次調用自身。

addToCart不應該在您的useEffect的依賴項中，因為它是 function ，您永遠不會在代碼中更改。 嘗試：

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