Question

请，请参见-https://codesandbox.io/s/morning-grass-z8qrq

https://codesandbox.io/s/blue-flower-wl92u

**第二次单击，第三次，第四次，第五次单击-menuOpen为true，然后再次单击false-行为符合预期**

let [menuOpen, setMenuOpen] = useState(false);

<div
    onClick={() => {
    // setMenuOpen(true);

    setMenuOpen(!menuOpen); // I's not updated in the First time.

    console.log(menuOpen); // First time: false // not updating
>
 .......// some code
</div>

请给我一些答案。我已经尝试解决此问题两天了。我只是解决不了。

Answer 1

尝试一下：

export default function App() {
  const [menuOpen, setMenuOpen] = useState(false);
  return (
    <>
      <button onClick={() => setMenuOpen(!menuOpen)}>Click</button>
      Is menu Open: { menuOpen ? "True": "False"}
    </>
  );
}

示例演示here。

Answer 2

useState为React核心创建队列以更新React组件的状态对象。因此，出于性能原因，更新React状态的过程是异步的。这就是为什么更改不会立即生效的原因。

Answer 3

尝试一下

setMenuOpen(prevMenuOpenState => !prevMenuOpenState);

或

<div
    onClick={() => setMenuOpen(!menuOpen)}
>

Answer 4

答案只是将代码重构为Component类，而不使用钩子useState。使用state和setState进行更新。问题会解决。

但是，如果我使用useState钩子，那么无论我对代码执行什么操作，问题都仍然存在。

Answer 5

我的代码中甚至有这个问题。我的情况如下：它的酒店详情页面。有房间类型的水平标签菜单。如果酒店有超过 3 种类型的房间，则有显示房间按钮。我通过代码使用 React Functional 组件。酒店详细信息基本页面和房间部分页面是创建的不同组件。值通过 props 传递给房间部分组件。

我的问题：当我单击进一步的第三种类型的房间类型时，然后在函数 (setSelectedTab()) 中显示房间值时，房间组件不会立即设置。因此，随着功能的进一步发展，它不会设置 document.getElementById(id)，因为尚未设置展厅。由于函数 (setSelectedTab()) 在第一次单击时完成，它将展示空间设置为 true，但未设置选定的选项卡。我必须第二次点击才能设置标签。

解决办法：经过长时间的尝试和错误，我解决了以下问题：我将该函数声明为 async 并等待 setshowRoom() 值。这解决了我的完整问题。

async function setSelectedTab(e, data) {
firstScroll += 1;

data >= 2 && await setMenuOpen(true);
if (data >= 0) {
  .................
  const id = e.href;
  const anchor = document.getElementById(id);
  ..............
..............
}
}

和房间组件：showRoom，在 useState 中 setshowRoom 并使用 props 调用 setSelectedTab()。这解决了单击问题

缺点：我发现设置此选项卡有 1 秒的延迟。

如果有人在不进行异步等待的情况下有比这更好的解决方案，请在此处发布。谢谢。

反应usestate不会在第一次单击或第一次时更新

5 个答案: