我正在使用 useEffect 钩子并且收到编译器错误提示React Hook useEffect has missing dependencies. Either include them or remove the dependency array react-hooks/exhaustive-deps
它对这两个功能都这么说。我想知道在这种情况下如何使用 useCallBack 钩子。我没有太多运气找到任何东西。任何摆脱这些编译器警告的帮助都将得到重视!
我正在使用 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)
}, []); // <- 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
@Tomáš Pustelník 是对的,但我有另一个解决方案给你。您可以禁用 eslint,例如:
useEffect(() => {
credits()
gpa()
// eslint-disable-line react-hooks/exhaustive-deps
}, [data]);