在 React 组件的状态中切换布尔值的正确方法

假设您有一个按钮,它只会在 React 组件的状态下切换布尔值:

export const MyButtonComponent = (props) => {
    const [foo, setFoo] = useState(false);
    const handleClick = () => { /* to be added */};
    return (
        <button onClick={handleClick}>Toggle</button>
    );
}

在 React 组件的状态中切换布尔值的正确方法

最初对我来说,最直观的方法似乎是这样:

const handleClick = () => setFoo(!foo);

但是,这似乎可能会导致一些极端情况(并且非常烦人)的错误。如果需要根据之前的值设置状态变量,建议在 useState 钩子中使用一个函数参数:

const handleClick = () => setFoo((foo) => !foo);

请注意,如果我们想要执行递增或递减操作,这也将适用,因为它们还根据其先前的值设置了一个状态变量:

const incrementingOnClick = () => setFoo((foo) => foo + 1);

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ttt5cn@163.com 举报,一经查实,本站将立刻删除。

发表评论

登录后才能评论