更新到 React 18 后，一个简单的 2 组件菜单停止工作。菜单是您单击的图标，单击菜单时会打开 MenuBox。

在 React 17 中，我得到了如下预期的行为:

升级到 React 18 后，我得到了这个行为，其中包含一个额外的点击......

菜单只会在单击时呈现 MenuBox，如下所示:

菜单

  function clicked() {
    console.log('DEBUG: Menu.jsx clicked')
    dispatch({type: 'toggleMenuPage'});
  }

  return (
    <div id="menu_hold">
      <SVGMenu onClick={clicked} id='menu_top'/>
      {menu && <MenuBox/>}
    </div>
  );

然而，在这次点击将 menu 切换为 true 之后...... MenuBox 然后检测到第二次点击(或传播点击)，它不应该这样做单击菜单时甚至没有呈现。

菜单框

  useEffect(() => {
    console.log('DEBUG: MenuBox.jsx useEffect()')
    function bodyClicked() {
      dispatch({type: 'toggleMenuPageOff'});
      console.log('DEBUG: MenuBox.jsx useEffect(): bodyClicked()')
    }
    document.body.addEventListener('click', bodyClicked);
    return () => {
      document.body.removeEventListener('click', bodyClicked);
    };
  });

这个“升级”破坏了菜单，因为它在打开时立即关闭，所以你永远看不到它。

我没有使用严格模式。

我在 changelog 中找不到任何相关内容.

最佳答案

我认为这是由 React Strict 模式引起的。 Further explanation

https://stackoverflow.com/questions/74690351/