如何在 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

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

–

发表评论