reactjs 在声明依赖项时防止useEffect循环

jv2fixgn 于 2023-04-11 发布在 React

关注(0)|答案(3)|浏览(119)

我正在尝试创建一个组件，用户可以使用Firebase作为我在next.js 13项目中的商店来添加或删除画廊。
因为我使用的是React钩子，所以我在文件的顶层设置了'use client'。
我通过调用Firebase集合来设置galleries的值。

const [galleries, setGalleries] = useState<any[]>([]);

useEffect(() => {
  const getFirebaseGalleries = async () => {
    const collectionRef = collection(db, "galleries");
    const querySnapshot = await getDocs(collectionRef);

    const documents = querySnapshot.docs.map((doc) => ({
      id: doc.id,
      ...doc.data(),
    }));

    console.log("useffect ran");

    setGalleries(documents);
  };

  getFirebaseGalleries();
}, [galleries]);

在我的功能组件中，我通过执行以下操作用网格显示图库

<CreateGalleryComponent />
  <Grid>
      {galleries.map((item) => (
        <>
           // logic and functionality for deleting an item in the GalleryItem component
          <GalleryItem key={item.id} {...item} />
        </>
      ))}
    </Grid>

在当前形式下，. updates将只在useEffect连续循环时显示。如果我从依赖数组中删除galleries，则组件不会重新呈现。
请您指出我在执行过程中的错误之处。
这可能是我从Firebase集合中添加/删除画廊的功能的分离吗？

reactjs

来源：https://stackoverflow.com/questions/75975084/preventing-useeffect-looping-when-dependency-is-declared

3条答案

按热度按时间

laik7k3q1#

我没有看到你有更新firebase图库的共享代码。你只是从firebase阅读相同的图库。
在我看来，你需要做下面的步骤。
1.让useEffect依赖数组为空，以获取初始渲染时的firebase数据，如@fly_sprig117所示
1.在<CreateGalleryComponent />中，点击创建事件，将图库发布到firebase商店。现在firebase将有更新的数据。
1.再次从firebase获取更新的图库。
1.一旦上述提取成功，更新您的图库状态，以在UI中显示新添加的图库。
下面是代码应该是这样的-

const onAddGalleryClick = async (event) => {

// Send gallery object to firebase
const successPostingGallery = await collectionRef.insert(newGalleryObj);

// fetch from firebase
const querySnapshot = await getDocs(collectionRef);
const documents = querySnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

// update the gallery
  setGalleries(documents);

};

**提示：**写一个函数从firebase获取gallery，并将gallery设置为local state，这样就可以在useEffect中使用它，并在两个地方创建事件处理程序。

另外，我认为您需要将galleries, setGalleries传递给<CreateGalleryComponent />组件。

赞(0）回复(0）举报 2023-04-11

dwbf0jvd2#

你必须从依赖数组中删除galleries。

useEffect(() => {
const getFirebaseGalleries = async () => {
  const collectionRef = collection(db, "galleries");
  const querySnapshot = await getDocs(collectionRef);

  const documents = querySnapshot.docs.map((doc) => ({
    id: doc.id,
    ...doc.data(),
  }));

  console.log("useffect ran");

  setGalleries(documents);
};

  getFirebaseGalleries();
}, []); //<----

通过删除库依赖项，该效果将仅在组件装入时调用一次，并且不会导致无限循环的更新。

赞(0）回复(0）举报 2023-04-11

d7v8vwbk3#

每次galleries的值发生变化时，都会调用你的特效。因为你是在特效结束时调用setGalleries，所以在那之后，值也会发生变化。这就是为什么你会有这个循环。看起来应该在一些用户交互之后获取galleries，所以你可以将这个获取逻辑移动到一些回调中，当用户点击一些按钮或其他东西时调用。

赞(0）回复(0）举报 2023-04-11