在 React Hooks 中切换布尔状态

Question

当我运行以下代码并点击按钮时，我设法触发了useEffect函数：

const { useState, useEffect } = React;

const Example = () => {
  const [bool, setBool] = useState(false);

  useEffect(() => {
    console.log(bool);
  }, [bool]);

  return (
    <button
      type='button'
      onClick={() => {
        setBool(!bool);
        setBool(!bool);
      }}
    >
      Check
    </button>
  );
};

ReactDOM.render(
  <Example />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

然而，当我写：

const { useState, useEffect } = React;

const Example = () => {
  const [bool, setBool] = useState(false);

  useEffect(() => {
    console.log(bool);
  }, [bool]);

  return (
    <button
      type='button'
      onClick={() => {
        setBool(true);
        setBool(false);
      }}
    >
      Check
    </button>
  );
};

ReactDOM.render(
  <Example />,
  root
)

<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

<div id="root"></div>

我知道 useEffect 函数没有被触发，因为 setBool 是异步的，React 合并了这些更改，所以最终状态没有改变（bool 仍然是 false）。

我的问题是，为什么 React 在我出现的 !bool 和 !bool 的情况下无法检测到它。

谢谢

Answer 1

在第一种情况下，您正在获取 bool 的当前值（无论该值可能是什么）并在将其设置为状态之前取反它。结果，状态被改变，所以useEffect被触发。

在第二种情况下，您提供了一个硬编码值。如果bool的值已经是false，那么setBool(false)不会对状态产生任何影响；因此，useEffect 不会被触发。

在 React Hooks 中切换布尔状态

Toggling boolean state in React Hooks

javascript

reactjs

react-hooks

use-effect

use-state