点击Propose按钮后TestPopUp弹窗无法显示的问题求助

问题现象 #

点击「Propose」按钮后，控制台能输出提示Propose clicked, setting showPopup to true，但showPopup值会反复在true和false之间切换，TestPopUp弹窗始终无法显示，且无报错信息。

可能原因及对应解决步骤 #

1. 组件基础结构不完整 #

从提供的代码看，CandidateActions组件存在两处明显的结构问题：

• 未声明skillsModalOpen对应的useState，但代码中直接使用了该状态
• 缺少完整的函数组件包裹结构

修复代码：

import { useState, useEffect } from 'react';
import TestPopUp from '../../TestPopUp';

const CandidateActions = ({ candidate }) => {
  // 补全缺失的状态声明
  const [showPopup, setShowPopup] = useState(false);
  const [skillsModalOpen, setSkillsModalOpen] = useState(false);

  // 监听showPopup状态变化，定位异常修改
  useEffect(() => {
    console.log('showPopup 当前值:', showPopup);
  }, [showPopup]);

  return (
    <>
      <ActionsGroup
        actionsData={[
          {
            title: 'Propose',
            onHandleClick: (e) => {     
              // 阻止可能的默认行为或事件冒泡
              e.preventDefault();
              e.stopPropagation();
              console.log('Propose 按钮被点击');
              setShowPopup(true);
            },
          },
          {
            title: 'Skills',
            onHandleClick: () => {
              setSkillsModalOpen(true);
            },
          },
        ]}
      />
      {showPopup && <TestPopUp />}
      <CandidateSkillsModal
        candidate={candidate}
        isOpen={skillsModalOpen}
        onClose={() => {
          setSkillsModalOpen(false);
          setShowPopup(true);
        }}
      />
    </>
  );
};

export default CandidateActions;

2. 状态被意外修改 #

通过上述代码中的useEffect监听，可以清晰看到showPopup的变化时机，进而定位：

• 是否是ActionsGroup组件内部存在重复触发点击事件的逻辑
• 是否父组件导致CandidateActions重复挂载，使状态被重置为初始值false
• 是否有其他未注意到的逻辑（如CandidateSkillsModal的副作用）修改了showPopup

3. 异步状态更新的误解 #

注意setState是异步操作，在onHandleClick中直接打印showPopup看到的是修改前的旧值，必须通过useEffect或函数式更新的方式查看最新值：

setShowPopup(prev => {
  console.log('修改前的showPopup值:', prev);
  return true;
});

4. 父组件渲染问题 #

如果CandidateActions被父组件在循环中渲染、或没有设置稳定的key、或被定义在父组件的渲染函数内部，会导致组件反复卸载重建，状态被重置。需要确保CandidateActions在父组件中被稳定渲染。

内容的提问来源于stack exchange，提问作者Guga Todua