React Hook useEffect缺少deps

Question

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

这两个函数都是这样写的。我想知道在这个实例中如何使用useCallBack钩子。我还没找到合适的东西。任何摆脱这些编译器警告的帮助都会得到重视！

Answer 1

我认为你发布的所有代码都在你的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)
  }, []);   // <- you have no dependencies, 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

Answer 2

@TomášPustelník是对的，但我有另一个解决方案给你。您可以禁用eslint，例如：

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