React中handleClose函数可打印日志但无法关闭子弹窗问题求助

我正在为个人业务开发小型在线商店，React技术不算熟练但已有进展，目标是完成可用功能。目前遇到的问题是：点击弹窗关闭按钮时，handleClose函数能在控制台打印日志，但弹窗无法关闭。已经尝试调整组件定义方式（函数、const、类），控制台无报错，怀疑是React基础概念理解有误，希望得到概念或元素误用的建议，而非直接修改代码。

相关代码 #

Products.js #

import React from 'react';
import Card from './Card';
import data from './data';
import '../styles/card.css';

const Products = () => {
return (
 <div className="cards-list"/>
{data.map(item => (
 <Card key={item.id} item={item} />
))}
 </div\>
);
};

export default Products;

Card组件 #

import React, { useState, useEffect }  from 'react';
import CardPopup from './CardPopup';
import '../styles/card.css';

const Card = ({ item }) => {
  const [showPopup, setShowPopup] = React.useState(false);
  const [cardImage, setCardImage] = useState(null);

  useEffect(() => {
    import(`../assets/${item.image}`).then((image) => {
      setCardImage(image.default);
    });
  }, [item.image]);

  const handleClick = () => {
    setShowPopup(true);
  };

  const handleClose = () => {
    console.log("handleClose called");
    setShowPopup(false);
  };

  return (
    <div className="card" onClick={handleClick}>
      <img src={cardImage} alt={item.title} className="card-image" />
      <div className="card-view">
        <div className="card-view-text">View</div>
      </div>
      <div className="card-product">{item.title}</div>
      {showPopup && (
        <CardPopup
          handleClose={handleClose}
          title={item.title}
          price={item.price}
          description={item.description}
          image={cardImage}
        />
      )}
    </div>
  );
};

export default Card;

CardPopup组件 #

import React from 'react';
import { createPortal } from 'react-dom';
import '../styles/CardPopup.css';

const CardPopup = ({ handleClose, title, price, description, image }) => {
  const popupRoot = document.getElementById('popup-root');

  return createPortal(
    <>
      <div className="card-popup-overlay"/>
      <div className="card-popup">
        <img src={image} alt={title} className="card-popup-image" />
        <div className="card-popup-content">
          <div className="card-popup-title">{title}</div>
          <div className="card-popup-price">{price}</div>
          <button className="card-popup-close" onClick={handleClose}>
            X
          </button>
          <div className="card-popup-description">{description}</div>
        </div>
      </div>
    </>,
    popupRoot
  );
};

export default CardPopup;

index.js中的弹窗容器配置 #

const popupRoot = document.createElement('div');
popupRoot.id = 'popup-root';
document.body.appendChild(popupRoot);

概念与元素误用排查建议 #

• 事件冒泡机制：检查弹窗关闭按钮的点击事件是否被父元素的点击事件捕获。如果弹窗的点击事件冒泡到绑定了handleClick的Card根div，会触发setShowPopup(true)，和handleClose里的setShowPopup(false)冲突，导致弹窗无法关闭。
• React Portal的状态关联逻辑：Portal仅改变DOM的渲染位置，其状态仍由定义它的父组件（Card）管理。需确认showPopup状态更新时，是否能正确触发Card组件的重新渲染，进而控制Portal内容的显示/隐藏。
• 状态更新的执行顺序：React状态更新是异步批量处理的，若同一事件循环内存在多个修改showPopup的操作，可能出现状态覆盖。需排查是否有其他事件处理函数在关闭弹窗时同时修改了该状态。
• 组件嵌套的事件委托影响：即使弹窗通过Portal渲染到body，点击事件仍会沿着DOM树向上冒泡。若弹窗的点击事件冒泡到Card组件或其祖先元素，可能触发打开弹窗的逻辑，抵消关闭操作。

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