0

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

它对这两个功能都这么说。我想知道在这种情况下如何使用 useCallBack 钩子。我没有太多运气找到任何东西。任何摆脱这些编译器警告的帮助都将得到重视!

4

2 回答 2

1

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

首先是关于添加依赖数组后的第二个错误 - 两个函数都在每次渲染时重新声明。因此 React 认为它们发生了变化并将重新运行钩子。您必须将creditsgpa方法都包装起来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
于 2020-11-03T21:12:58.147 回答
0

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

  useEffect(() => {
    credits()
    gpa()
    // eslint-disable-line react-hooks/exhaustive-deps
  }, [data]);
于 2020-11-03T21:50:40.293 回答