父组件setState生效，子组件内setState不生效的问题排查

核心原因 #

你的问题本质是组件卸载导致状态更新失效，叠加事件冒泡的影响：

1. Report 组件渲染在 <li> 内部，父组件通过 handleClick 切换的 click 状态控制着 <ul> 的显示/隐藏（推测父组件逻辑为 {click && <ul>...</ul>}）。点击 <li> 触发 handleClick 后，click 状态反转，<ul> 被卸载，内部的 Report 组件也随之销毁。
2. 点击 Report 内的 <div> 时，事件会向上冒泡到 <li>：先触发 div 的 setIsModalOpen(true)，紧接着触发 <li> 的 handleClick 导致组件卸载——React 会忽略已卸载组件的状态更新，因此 modal 无法正常打开。

解决方案 #

要实现「点击 <li> 隐藏 <ul> 同时打开 modal」的需求，核心是让 modal 脱离 <ul> 的渲染层级，不受 <ul> 卸载的影响，以下是两种可行方案：

方案1：将 Modal 状态提升到父组件

把 modal 的控制权移到父组件，让 modal 直接渲染在父组件根节点下，不受 <ul> 显示状态影响：

1. 父组件添加 modal 状态，点击 <li> 时同步触发隐藏 <ul> 和打开 modal：

const [isModalOpen, setIsModalOpen] = useState(false);
const { handleClick } = useClick;

return (
  <>
    {/* Modal 直接渲染在父组件，不受 ul 卸载影响 */}
    {isModalOpen && <Modal open={isModalOpen} />}
    
    <ul>
      {actions.map((action: string) => (
        <li 
          onClick={() => {
            handleClick(); // 隐藏 ul
            // 判断当前 action 为召回举报时，打开 modal
            if (action === Actions.submit_recall) {
              setIsModalOpen(true);
            }
          }} 
          key={uuidv4()}
        >
          {getAction(action, id, () => setIsModalOpen(true))}
        </li>
      ))}
    </ul>
  </>
);

2. 修改 Report 组件，移除内部 modal 状态，通过 props 接收打开 modal 的回调：

export const Report = ({ id, onOpenModal }: ReportType & { onOpenModal: () => void }): JSX.Element | null => {
  return (
    <div onClick={onOpenModal}>Report a Recall</div>
  );
};

3. 更新 getAction 函数，传递回调参数：

export const getAction = (
  action: string,
  id: number | string,
  onOpenModal?: () => void
): JSX.Element | null => {
  switch (action) {
    case Actions.submit_recall: {
      return <Report {...{ id, onOpenModal }} />;
    }
    // 其他 case 逻辑...
  }
};

方案2：使用 React Portal 挂载 Modal

利用 React Portal 将 modal 挂载到 DOM 的独立节点（比如 <body>），使其脱离当前组件树层级，即使 <ul> 卸载，modal 仍能保留：

import { createPortal } from 'react-dom';

export const Report = ({ id }: ReportType): JSX.Element | null => {
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  // 查找挂载 modal 的根节点，无则使用 body
  const modalRoot = document.getElementById('modal-root') || document.body;

  return (
    <>
      <div 
        onClick={(e) => {
          // 阻止事件冒泡到 li，避免触发 handleClick 导致组件卸载
          e.stopPropagation();
          setIsModalOpen(true);
        }}
      >
        Report a Recall
      </div>

      {isModalOpen && createPortal(
        <Modal open={isModalOpen}>
          {/* modal 内容 */}
        </Modal>,
        modalRoot
      )}
    </>
  );
};

若需要点击整个 <li> 都触发隐藏 <ul> 和打开 modal，可结合方案1的思路，在父组件点击逻辑中主动控制 modal 状态。

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