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

Question

我正在尝试创建一个组件，用户可以添加或删除画廊使用Firebase作为我的商店内的next.js 13项目。

当我使用React钩子时，我在文件的顶层设置了'use client'。

我正在通过调用Firebase集合来设置当前画廊的值。在我的React功能组件中，我有以下

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>

当前形式。只有当useEffect持续循环时，更新才会显示。如果我从依赖数组中删除这些库，组件就不会重新呈现。

你能指出我在执行中哪里出错了吗?

这可能是我的功能分离添加/从Firebase收集删除画廊?

Answer 1

我没有看到你在任何地方共享更新firebase库的代码。你只能从firebase读取相同的图库。

在我看来，你需要做以下步骤:

1. 使您的useEffect依赖数组为空，以获得初始渲染时的firebase数据，如@fly_sprig117
所示
2. 在<CreateGalleryComponent />中，点击创建事件，将图库发布到firebase存储。现在firebase将有更新的数据。
3. 再次从firebase获取更新的图库。
4. 一旦上面的获取成功，更新你的画廊状态，在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获取图库，并将图库设置为本地状态，这样你就可以在useEffect中使用它，并在两个地方创建事件处理程序。

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

Answer 2

您必须从依赖数组中删除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();
}, []); //<----

通过移除gallery依赖，该效果将只在组件挂载时调用一次，并且不会导致无限循环的更新。

Answer 3

您的效果将在每次画廊值更改时调用。因为你在你的效果结束时调用setGalleries，值在那之后会改变。这就是为什么会有这个循环。似乎画廊应该在一些用户交互之后被获取，所以你可以将这个获取逻辑移动到一些回调，当用户点击一些按钮或其他东西时调用。