如何修复使用useEffect React Hook时缺失的依赖警告

使用React 16.8.6(在之前的版本16.8.3上很好)，当我试图阻止fetch请求上的无限循环时，我得到了这个错误:

./src/components/BusinessesList.js
Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.
Either include it or remove the dependency array  react-hooks/exhaustive-deps

我一直无法找到一个解决办法来停止这个无限循环。我想远离使用useReducer()。我确实找到了关于'筋疲力尽-deps' lint规则#14920的讨论[ESLint]反馈，其中一个可能的解决方案是，如果你认为你知道你在做什么，你可以总是// ESLint - disabled -next-line react-hooks/详尽-deps。我对我正在做的事情没有信心，所以我还没有尝试实现它。

我有这个当前的设置，React钩子useEffect连续运行永远/无限循环，唯一的评论是关于useCallback()，我不熟悉。

我目前如何使用useEffect()(我只想在开始时运行一次，类似componentDidMount()):

useEffect(() => {
    fetchBusinesses();
  }, []);

const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

当前回答

这不是一个特定于问题用例的答案，而是更普遍的情况，并涵盖了useEffect或提取和导入不工作的情况。 useRef senario:

有时情况是，useEffect应该有一个空数组，你仍然想在useEffect部分的状态中使用，但仍然不想将它们作为依赖注入，你也可以尝试useCallback，现在react抱怨useCallback的依赖，你卡住了。在这种情况下，在某些情况下可以使用useRef。例如:

const locationRef = useRef(location);
useEffect(()=>{
const qs = locationRef.current.search
...
},[])

在使用这种技术时，您应该小心，并注意useRef不会激活渲染进程。

2021-10-28 09:23:55

其他回答

如果在useEffect中使用的变量是在组件内部定义的，或者是作为道具传递给组件的，则会发生此警告。因为你在同一个组件中定义了fetchBusinesses()，而eslint遵循这一规则，你必须将它传递给依赖数组。但在您的情况下，只传递[]也可以

在这种情况下，它将工作，但如果fetchBusinesses在函数中使用setState，并且调用它将重新呈现组件，因此您的fetchBusinesses将改变，因此useEffect将运行，这将创建一个无限循环。因此，仅仅盲目地遵循eslint可能会导致额外的错误。

用例解决方案让eslint满意，使用useCallback和[]。

const memoizedFetchBusinesses=useCallback(
        fetchBusinesses,
        [] // unlike useEffect you always have to pass a dependency array
       )

当组件第一次呈现时，在内存中创建一个名为fetchBusinessess的函数，并创建memoizedFetchBusinesses变量，该变量也在内存中引用相同的函数。

在第一次渲染之后，一个被称为fetchbusiness的函数将再次被创建，但这一次在不同的内存位置，因为我们在useCallback中有[]，memoizedFetchBusinesses将在相同的内存中给你原始的fetchBusinesses函数。这里的useCallback将为您提供在组件的第一次呈现中创建的相同的函数引用。

useEffect(()=>{
    memoizedFetchBusinesses();
},[memoizedFetchBusinesses])

相反，你可以这样定义函数

const fetchBusinesses = useCallback(() => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  },[]);

然后在useEffect中

useEffect(() => {
    fetchBusinesses();
  }, [fetchBusinesses]);

2021-03-28 23:32:32

如果您想禁用这个无用的消息，只需在文件的开头添加这个。

/* eslint-disable react-hooks/exhaustive-deps */

这将禁用整个文件的警告。

2022-10-20 10:57:58

这些警告对于查找不一致更新的组件非常有帮助:从依赖项列表中省略函数是否安全?

然而，如果你想在你的项目中删除警告，你可以添加到你的ESLint配置:

  {
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/exhaustive-deps": 0
    }
  }

2020-03-30 16:24:38

你可以通过传递一个引用来消除这个Es-lint警告:

下面提到的例子，但是你可以在这个链接上观看解决方案:https://www.youtube.com/watch?v=r4A46oBIwZk&t=8s

警告: 第13:8行:反应。useEffect缺少依赖项:'history'和'currentUser?.role'。要么包含它们，要么删除依赖数组react-hooks/ exhaustion -deps

React.useEffect(() => {
    if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}, [])

解决方法: 步骤1:将业务逻辑移到单独的const中。

现在的警告是:React Hook React。useEffect有一个缺失的依赖:' rolecheck '。

const roleChecking = () =>{
   if (currentUser?.role !== "Student") {
        return history.push("/")
    }
}

React.useEffect(() => {
    roleChecking()
}, [])

最后一步是创建对函数的引用:

  const roleRef = React.useRef();

  const roleChecking = () => {
    if (currentUser?.role !== "Student") {
      return history.push("/");
    }
  };
  roleRef.current = roleChecking;

  React.useEffect(() => {
   return roleRef.current();
  }, [currentUser?.role]);

2021-09-21 13:29:59

在我的例子中，它对我的局部变量组织有这个警告，当我把组织放在依赖数组中时，useEffect将获取无限。因此，如果你有一些像我这样的问题，使用useEffect和依赖数组并拆分:

因为如果您有多个修改状态的API调用，它会多次调用useEffect。

来自:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
    dispatch(getMembers({}))
  }, [dispatch, organization])

To:

  const { organization } = useSelector(withOrganization)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(getOrganization({}))
    dispatch(getSettings({}))
  }, [dispatch, organization])

  useEffect(() => {
    dispatch(getMembers({}))
  }, [dispatch])

2021-04-09 07:19:08

如何修复使用useEffect React Hook时缺失的依赖警告

推荐文章

最新文章

标签