React Hook use影响丢失的部门

问题描述

我正在使用useEffect挂钩，并收到编译器错误，提示React Hook useEffect has missing dependencies. Either include them or remove the dependency array react-hooks/exhaustive-deps

两个功能都这样说。我想知道在这种情况下将如何使用useCallBack挂钩。我没有为它找到任何东西的运气。摆脱这些编译器警告的任何帮助将不胜感激！

解决方法

我假设您发布的所有代码都在您的React组件中。不确定如何使用方法返回的值。从示例代码尚不清楚。

首先是添加依赖项数组后的第二个错误-在每个渲染器上都重新声明了这两个函数。因此，React认为它们已更改，并将重新运行该钩子。您必须将credits和gpa方法都包装在useCallback中，以将data作为依赖项来避免这种情况。

我个人将两种方法都重构为纯函数。意味着他们将把数据作为函数的参数，而不是从上层范围获取。然后，如果将它们都包装在useCallback中，它们将永远不会改变，因为不会有依赖关系。然后，您可以将这两种方法与数据一起添加到useEffect挂钩依赖项中，并且一旦数据更改，就会计算这两个函数。结果与oyu仅将方法包装在useCallback中相同。但是我认为使用纯函数，代码更容易推理。您有两种方法需要一些参数，一旦数据更改，您就可以运行这些方法来重新计算一些更改。

这就是我要修改代码的方式：

const credits = useCallback((courses) => {
  let credits = 0
  courses.forEach((c) => (
    credits += parseInt(c.courseCredits)
  ))
  if(isNaN(credits)) credits = 0
  return credits
},[]);   // <- you have no dependencies,so it will be always same function for entire component lifecycle
  
  const gpa = useCallback((courses) => {
    let honorPoints = 0
    let credits = 0
    let cumulativeGpa = 0
    courses.forEach(c => {
      credits += parseInt(c.courseCredits)
      honorPoints += parseFloat(getGradeNumber(c.numericGrade) * c.courseCredits)
      cumulativeGpa = honorPoints / credits
    })
    if(isNaN(cumulativeGpa)) cumulativeGpa = 0
    return cumulativeGpa.toFixed(2)
  },so it will be always same function for entire component lifecycle

  useEffect(() => {
    credits(data)
    gpa(data)
  },[credits,gpa,data]); // <- credits and gpa will never change so the useEffect will run only when data change

,

@TomášPustelník是正确的，但我为您提供了另一种解决方案。您可以禁用eslint，例如：

  useEffect(() => {
    credits()
    gpa()
    // eslint-disable-line react-hooks/exhaustive-deps
  },[data]);