如何解决为什么不能将useState挂钩的调度功能直接传递到onClick处理程序中?
const Counter = () => {
const [count,setCount] = useState(0);
// return <button onClick={setCount(count + 1)}>{count}</button>;
return <button onClick={() => setCount(count + 1)}>{count}</button>;
};
我知道注释掉的行会导致无限循环,但是我想知道为什么会这样。 setCount
调度功能不是仅在单击时调用的吗?
解决方法
这是因为JSX中{}
中的表达式被求值,然后将其结果用于{}
所在的位置,在这种情况下,它是{ {1}}属性。因此onClick
求值 onClick={setCount(count + 1)}
(调用函数,它将设置状态),然后将结果值用于setCount(count + 1)
。由于调用它会设置状态,因此会导致重新渲染,并不断进行渲染。
您的其他版本在评估JSX而不调用它时会创建一个函数,这就是它起作用的原因。
,执行此操作时:
onClick={setCount(count + 1)}
您正在渲染期间调用该方法。
我看不到无限循环,但是您正在为每个导致重新渲染的渲染调用setCount。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。