反应适当的useEffect依赖关系

Question

所以我有这个应用程序，它有针对不同api端点的大约6个提取函数，我在我的终端上收到了一个警告错误--相同的函数名，表明我应该将它包含在我的useEffect的依赖数组中。我的函数在useEffects之上。这个过程是在第一次加载时，我想让它们全部获取，然后只有当它们选择另一个源或类型时才会再次获取--它完成了我想要的工作，但为什么我会看到这些警告呢？

useEffect(() => {

    fetchTtype()
    fetchSource()
    fetchSet()
}, [chosenType, chosenSource])

useEffect(() => {
    setIsLoading(true)
    fetchUsers()
    fetchUserProblems()
    fetchAuthority()
},[])

第111:8行: React useEffect缺少依赖项：“取取数据”、“取取源”和“取取类型”。要么包含它们，要么删除依赖项数组。

deps钩子/详尽-deps第118:7行: React缺少依赖项：“fetchProblems”、“取取权限”、“fetchUsers”和“setIsLoading”。要么包含它们，要么删除依赖数组react/react。

Answer 1

如果在useEffect中使用在useEffect之外声明的一些函数/变量，则必须将其作为依赖项添加，以防其更改。

在useEffect内部使用的外部变量应该被嵌入到依赖数组中，并且您的函数是在它之外定义的，这就是它警告您的原因。

虽然有一些例外的情况，当你不必添加所有的东西。例如，如果在setState中调用useEffect方法，则不需要在依赖数组中嵌入它(因为function将确保该函数不会改变)。

了解更多关于在这里添加到依赖项的内容：https://devtrium.com/posts/dependency-arrays

Answer 2

如果您的函数或方法只被调用一次，那么最好在同一个useEffect钩子中声明和调用该函数。

例如：-

​

 useEffect(() => {
    const options = {
      weekday: "long",
      year: "numeric",
      month: "long",
      day: "numeric",
    };
    const getCurrentDate = () => {
      let date = new Date();
      setDate(date.toLocaleDateString("en-us", options));
    };

    getCurrentDate();
  }, []);

​

如上面的代码所示，尝试将函数或方法包含在useEffect钩子中，或者如果您想要添加一些依赖项，它可以是变量，当更改时，useEffect将再次触发。