javascript-按钮onClick事件不总是在react组件中触发

我有一个显示数据行的表。每行上都有一个按钮，单击该按钮将打开一个操作菜单，其中包含许多作为按钮实现的选项。当您单击其中一个操作按钮时，将执行一些操作（在这种情况下，会在浏览器中显示警报）。

我遇到的问题是，动作菜单按钮中的点击事件处理程序在点击几次后就不再触发了。复制（希望）的步骤：

1. 点击ClickMe对于具有的行Bob，操作菜单将弹出。

2. 点击Action1此时会出现浏览器警报消息。单击“确定”以解除警报。

3. 然后执行以下操作：

   Action1,Action2,Action3,Action2,Action3Action3直到它停止报警，或交替Action2和Action3直到Action3停止报警；如果你点击Action3然后立即恢复处理点击事件。

一个观察结果是，这些动作按钮上的点击事件处理程序在codepen中更可靠，而在我的本地开发环境中，问题很快就会出现。

我在codepen中提供了一个工作示例：

https://codepen.io/kevstercode/pen/gOexPea

这是codepen示例本身，以防codepen消失：

const { useState, useEffect } = React;

const App: React.FC<{}> = () => {
  return (
    
  );
};

const Results: React.FC<{}> = () => {
  const testData = {
    "recs": [
      {
        "id": "1",
        "name": "Bob"
      },
      {
        "id": "2",
        "name": "Alice"
      },
      {
        "id": "3",
        "name": "Fred"
      }
    ]
  };
  
  const [data, setData] = useState(testData);
    // Show/hide action menu and it's position
  const [isShown, setIsShown] = useState(false);
  const [position, setPosition] = useState({ x: 0, y: 0 });

  // Track last item clicked
  const [lastItemId, setLastItemId] = useState(null);
  
  useEffect(() => {
    setData(testData);
  },[]);
  
  const showActionMenu = (itemId: string, event: React.MouseEvent) => {
    console.log(`*** showActionMenu - this: ${itemId} last: ${lastItemId});`)
    event.preventDefault();
    
    // If last item and this item are the same then we close the action menu
    if(itemId === lastItemId && isShown) {
      setIsShown(false);
      return;
    }

    setIsShown(false);
    
    const newPosition = {
      x: event.pageX,
      y: event.pageY + 8
    };

    setPosition(newPosition);
    setIsShown(true);

    setLastItemId(itemId);
  };

  const hideActionMenu = () => {
    setIsShown(false);
  };
  
  return (
    <>
     hideActionMenu()} />

  display: flex;
  flex-direction: column;
  margin-top: 2px;
  margin-bottom: 2px;
}

.action-menu li {
  list-style-type: none;
  cursor: pointer;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 5px;

.action-menu li:hover {
  background-color: #d1cece;
}

.opt-action-menu li button {
  border: none;
  background: none;
  padding: 0;
}