如何在 React 中切换布尔状态

在 React 中切换布尔状态

How to toggle a Boolean state in React

在 React 中切换布尔状态:

  1. 使用useState钩子来跟踪布尔值的状态。
  2. 将函数传递给setState挂钩返回的函数。
  3. 根据当前值切换布尔值,例如
    setIsLoading(current => !current).
应用程序.js
import {useState} from 'react'; export default function App() { // 👇️ initialize boolean to false const [isLoading, setIsLoading] = useState(false); const toggleIsLoading = () => { // 👇️ passed function to setState setIsLoading(current => !current); }; return ( <div> <button onClick={toggleIsLoading}>Toggle loading state</button> {isLoading && <h2>Loading...</h2>} </div> ); }

切换布尔状态

我们将一个函数传递给,因为该函数保证会使用布尔setIsLoading值的当前(最新)值调用。isLoading

在示例中,我们简单地切换布尔值并返回结果以更新状态。

我们使用
逻辑 NOT (!)
运算符来翻转布尔值。

以下是使用逻辑 NOT 运算符的一些示例。

应用程序.js
console.log(!true); // 👉️ false console.log(!false); // 👉️ true
请注意,您不应尝试在更改布尔状态变量后立即访问它。

如果您尝试isLoading在使用函数更新状态变量后立即
访问
setIsLoading它,则无法保证您将获得当前(最新)值。

如果您需要监听状态变化,请将状态变量添加到
useEffect挂钩的 dependencies 数组中。

应用程序.js
import {useEffect, useState} from 'react'; export default function App() { const [isLoading, setIsLoading] = useState(false); const toggleIsLoading = () => { // 👇️ passed function to setState setIsLoading(current => !current); }; useEffect(() => { // 👇️ if you need to listen for changes of isLoading boolean console.log('isLoading is: ', isLoading); }, [isLoading]); return ( <div> <button onClick={toggleIsLoading}>Toggle loading state</button> {isLoading && <h2>Loading...</h2>} </div> ); }

我们将isLoading状态变量添加到挂钩的依赖项数组中,因此任何时候isLoading发生变化,useEffect挂钩中的逻辑都会重新运行。

请注意,挂载组件时也会调用挂钩。

如果您不想useEffect在初始渲染时运行挂钩中的逻辑,而只是在特定状态变量发生变化时运行,请使用 aref在初始渲染时尽早返回。

应用程序.js
import {useEffect, useState, useRef} from 'react'; export default function App() { const [isLoading, setIsLoading] = useState(false); const toggleIsLoading = () => { setIsLoading(current => !current); }; const isFirstRender = useRef(true); useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; return; // 👈️ return early if first render } console.log('isLoading is: ', isLoading); }, [isLoading]); return ( <div> <button onClick={toggleIsLoading}>Toggle loading state</button> {isLoading && <h2>Loading...</h2>} </div> ); }

当hook 在 mount 上运行时,我们使用ref提前退出。useEffect

如果您想监听状态变化但需要跳过第一次渲染,请使用这种方法。

发表评论