Javascript 带有自定义挂钩的无限循环，具有UseEffect

我正在尝试创建一个自定义钩子，但我遇到了无限循环的问题

我的页面上有一段实现自定义挂钩的代码：

const handleOnFinish=response=>{
const{data}=响应
setIsLoading（错误）
setTableData（数据）
设置页面（第页）
}
常量handleOnInit=（）=>setIsLoading（true）
useEffectUseCaseTokenValidation({
onFinish:handleOnFinish，
onInit:Handleonit，
参数：{nameToFilter:nameFilter，第}，
用例：“获取客户端\u用例”
})

这是我的定制钩子：

从'react'导入{useContext，useEffect}
从“@s-ui/react Context”导入上下文
常量noop=（）=>{}
导出函数useEffectUseCaseTokenValidation({
onFinish=noop，
onInit=noop，
params={}，
用例=“”
}) {
const{domain}=useContext（上下文）
const config=domain.get（'config'）
useffect（（）=>{
onInit（）
领域
.get（用例）
.execute（参数）
。然后（响应=>{
常量{error}=响应
if（error&&error.message==“无效的\u令牌”）{
window.location.replace（config.get（'LOGIN\u PAGE\u URL'））
}
onFinish（响应）
})
}，[params]）//eslint禁用行
}

这样，

useffect

就会一次又一次地被释放，而不考虑参数。我为params添加了一个

console.log

，并且总是收到相同的消息

我在没有自定义挂钩的情况下正确地使用了这个

useCase

，所以这不是问题所在

我想使用这个自定义钩子来避免在所有项目页面的所有UseEffects上复制和粘贴重定向

---

谢谢大家!

问题在于对象引用，这意味着您正在将

{nameToFilter:nameToFilter，page}

作为参数传递，但每次组件呈现一个新的对象引用时，都要将其与

==

进行比较，因此如果您在控制台中运行此代码

var params1 = { name: 'mike', age: 29 };
var params2 = { name: 'mike', age: 29 };
console.log(params1 === params2); // it will console false

这是因为当对象的键/值对相同时，对象声明不是相同的事件

所以，为了避免无限循环进入钩子，您应该使用

usemo

来避免这种情况，所以试试这个

import { useMemo } from 'react';
const params = useMemo(() => ({ nameToFilter: nameFilter, page }), [nameFilter, page])

useEffectUseCaseTokenValidation({
  onFinish: handleOnFinish,
  onInit: handleOnInit,
  params: params,
  useCase: 'get_clients_use_case'
})

usemo

将避免在组件的每个渲染阶段重新创建对象引用

请阅读

---

请阅读本文以了解值与引用之间的差异比较

params

在每个渲染中都是一个新的JavaScript对象，因此当它作为依赖项传递给

useffect

时，它将始终触发再次调用它。列出每一个不变的值：

[params.nameToFilter，params.page]

。禁用lint时，您应该确定自己在做什么。最好的响应！它是有效的，我理解它。非常感谢。我很高兴知道这对你有帮助@埃托尔