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

前端小智 • 2021-09-17 09:55:11 • 前端

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

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

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

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

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

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

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

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

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

发表评论