function 定义是否需要在 useEffect 中？

Question

以这种方式使用 useEffect 有什么问题吗？ 我见过的很多例子似乎也将 function 定义放在了 useEffect 中。 但是，我希望能够在删除/更新项目后再次调用 function。

      const getSchools = async () => {
           const data = await getDocs(schoolsCollectionRef)
           setSchools(data.docs.map((doc) => ({...doc.data(), id:doc.id})))
           console.log(data.docs)
      
       }

    useEffect(() =>{
             getSchools()
    }, [])

Answer 1

以这种方式使用 useEffect 有什么问题吗？

那么可能有。 一般来说，建议是列出您在useEffect中使用的所有变量（来自组件范围）作为依赖项。 在您的情况下getSchools就是这样一个变量（即使它是 function - function 本身可能会引用组件 scope 中的一些变量），并且可能导致关闭。 官方文档中有一个关于此的部分，您可以查看。

由于您无法在useEffect getSchools因为您在其他地方使用它），我认为您可以使用此解决方案 go ：

作为最后的手段，您可以添加一个 function 来影响依赖关系，但将其定义包装到 useCallback Hook

同样从这里的文档中可以看出，您可以从依赖项中省略 function ：

如果 function 中没有任何内容（或它调用的函数）引用道具、state 或从它们派生的值，则从依赖列表中省略 function 是安全的