Javascript 无限循环钩

我不明白为什么会有无限循环 useClick我看到我使用setVal更改了useffect中的状态值，但是useffect应该只在第二个参数中指定的onClick上工作。我认为这是因为参数onClick I pass已被记忆，但没有调用回调（我使用console.log（'go set'）

函数使用单击（onClick，setVal，val）{
React.useffect（（）=>{
console.log（'Click'）；
setVal（val+1）；
}，[onClick]）；
}
常量Home=（）=>{
const[val，setVal]=React.useState（0）；
const incrementOnClick=React.useCallback（（）=>{
console.log（'go set'）；
setVal（val+1）；
}，[setVal，val]）；
使用单击（递增单击、设置值、值）；
返回
{val}
点击我
}

val

和

setVal

将在每次渲染时更改，这反过来将导致

incrementOnClick

成为新的函数引用，并且始终会调用

useClick

效果

您可以将函数作为第一个参数赋给

setVal

。此函数将当前

val

作为参数并返回新值。这样

incrementOnClick

将始终是同一个函数

const{useffect，useState，useCallback}=React；
函数useClick（onClick、setVal、val）{
useffect（（）=>{
控制台日志（“单击”）；
setVal（val+1）；
}，[onClick]）；
}
常量Home=（）=>{
const[val，setVal]=useState（0）；
const incrementOnClick=useCallback（（）=>{
控制台日志（“go set”）；
setVal（val=>val+1）；
}, []);
使用单击（递增单击、设置值、值）；
返回(
{val}
点击我
);
};
ReactDOM.render（，document.getElementById（“根”）；

---

看看你想做什么，我相信你错过了hook&React最有用的功能之一，那就是合成

下面是一个您所做的示例，但仅创建另一个名为

的组件，对我来说，它只会使代码更易于理解/调试。自定义挂钩非常好，但对于这样做，我认为它是错误的工具

const{useffect，useState}=React；
const IncrementButton=props=>{
const{val，setVal，children}=props；
返回setVal（val+1）}
>{儿童}；
}
常量Home=（）=>{
const[val，setVal]=useState（0）；
返回(
{val}
点击我
);
};
ReactDOM.render（，document.getElementById（“根”）；

我认为循环是由于

useClick

内部

Home

组件的调用造成的：

Home

调用

useClick

，内部

useClick

您更改

Home

的

val

属性，从而

Home

组件重新呈现，从而调用函数

Home

再次，因此，

useClick

再次执行..并且有一个循环查看您的代码，我不确定您要做什么。请记住，每次渲染

Home

时，您都会得到另一个

incrementOnClick

的实例，因此将该参数作为最后一个参数传递给

useffect

不会做任何事情ng.是的，这就是为什么我使用useCallback函数来避免这个问题，这个问题主要是问我是否理解钩子。当然最后的按钮看起来会像你写的那样分开。谢谢

function useClick(onClick, setVal, val) {
  React.useEffect(() => {
    console.log('Click');
    setVal(val + 1);
  }, [onClick]);
}

const Home = () => {
  const [val, setVal] = React.useState(0);
  const incrementOnClick = React.useCallback(() => {
    console.log('go set');
    setVal(val + 1);
  } , [setVal, val]);
  useClick(incrementOnClick, setVal, val);
  return <div>
    <div>{val}</div>
    <button onClick={incrementOnClick}>Click me</button>
 </div>
}