导致无限循环的useEffect依赖项

Question

我正在创建一个简单的议程应用程序，它作为后端连接到Firebase。我想在每次写入时获取数据，我试图避开一个无限循环。

useEffect(() => {
    const getTodos = () => {
      console.log("I will run");
      db.collection("Users")
        .doc(user.email)
        .collection("Todos")
        .get()
        .then((snapshot) => {
          const loadedTodos = snapshot.docs.map((docs) => {
            return {
              todo: docs.data().todo,
              isCompleted: docs.data().isCompleted,
              id: docs.id,
            };
          });
          setTodos(loadedTodos ?? []);
        });
    };
    getTodos();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [todos]);

初始todos状态为null。然而，当我获取Firebase数据时，它会发生变化，然后导致组件本身的重新渲染，这将导致另一次获取，再次导致无限循环。我已经因此打破了Firebase中火花计划的限制，并因为临时阻塞而浪费了几天的工作。我认为这可以用useCallback钩子修复，但我不知道如何修复。此外，我想在聊天应用程序中添加相同的功能（数据将从两侧写入）。只有当双方中的一方写了，或者在这种情况下它必须是一个无限循环时，才可以重新渲染吗？

Answer 1

我刚刚添加了一个新的useState钩子ShouldComponentRender，它在调用函数（addTodos、deleteTodo、setCompletionState）时会发生更改，然后ShouldComponentRender状态被添加为useEffect钩子的依赖项。给了我想要的结果。谢谢

Answer 2

您希望在效果中的依赖关系是user.email

useEffect(() => {
   const getTodos = () => {
     console.log("I will run");
     db.collection("Users")
       .doc(user.email)
       .collection("Todos")
       .get()
       .then((snapshot) => {
         const loadedTodos = snapshot.docs.map((docs) => {
           return {
             todo: docs.data().todo,
             isCompleted: docs.data().isCompleted,
             id: docs.id,
           };
         });
         setTodos(loadedTodos ?? []);
       });
   };
   getTodos();
 }, [user.email]);

您可以这样理解：每当user.email发生变化时，我都想重新绘制待办事项列表。

编辑：正如其他人所说，观察无限循环的原因是效果本身改变了效果的依赖性，从而导致效果再次运行。这通常可以通过“提升状态”来解决，但在这种情况下，这是因为您使用了错误的依赖项。