我不明白为什么useClick中会出现无限循环, 我看到我使用setVal更改了useEffect中的状态值,但useEffect应该仅在第二个参数中指定的onClick上起作用。我认为这是因为我传递的参数onClick被记录下来,但未调用回调(我使用console.log('go set'检查过)
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>
}
Run Code Online (Sandbox Code Playgroud)