使用本机反应从 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]);