解决基于认证状态的Material UI弹窗仅首次显示的问题

核心问题分析 #

1. Modal组件状态独立，父组件无法控制：原TransitionsModal自行管理弹窗的open状态，导致父组件Card无法触发弹窗打开操作
2. Card组件状态逻辑混乱：isShown状态与auth绑定逻辑错误，点击卡片时无法正确触发弹窗显示
3. Modal组件props接收错误：未正确解构props，导致auth参数实际是整个props对象而非布尔值

修复步骤及代码修改 #

1. 重构TransitionsModal为受控组件

让弹窗的显示状态由父组件控制，不再自行管理open状态：

import * as React from 'react';
import Backdrop from '@mui/material/Backdrop';
import Modal from '@mui/material/Modal';
import Fade from '@mui/material/Fade';
import "./popup.css";

export default function TransitionsModal({ open, onClose }) {
    return (
        <div>
            <Modal
                aria-labelledby="transition-modal-title"
                aria-describedby="transition-modal-description"
                open={open}
                onClose={onClose}
                closeAfterTransition
                BackdropComponent={Backdrop}
                BackdropProps={{
                    timeout: 500
                }}
            >
                <Fade in={open}>
                    <div className="popup-container" id='blur'>
                        <h1>如需查看详情请登录</h1>
                        <div className='popup-buttons'>
                            <a className='giris-yap-wrapper' href="/signIn">
                                <input
                                    type="submit"
                                    value="登录"
                                    className="popup-input-login"
                                    onClick={onClose}
                                />
                            </a>
                            <input 
                                type="submit" 
                                value="取消" 
                                className="popup-input" 
                                onClick={onClose}
                            />
                        </div>
                    </div>
                </Fade>
            </Modal>
        </div>
    );
}

2. 修改Card组件，控制弹窗显示逻辑

移除冗余的isShown状态，新增modalOpen状态专门管理弹窗，点击卡片时根据auth状态判断是否打开弹窗：

import React, { useState } from 'react';
import './card.css';
import HeartButton from "./HeartButton";
import Modal from './TransitionsModal'; // 确保导入路径与组件文件匹配

const Card = ({ profile, auth }) => {
  const [modalOpen, setModalOpen] = useState(false);

  const handleClick = () => {
    // 未登录时打开弹窗，已登录可补充详情页跳转逻辑
    if (!auth) {
      setModalOpen(true);
    } else {
      // 示例：跳转到用户详情页
      // window.location.href = `/profile/${profile.ID}`;
    }
  }

  return (
    <div className='influencer-profile-card' onClick={handleClick}>
      <Modal open={modalOpen} onClose={() => setModalOpen(false)} />
      
      <div>
        <HeartButton/>
      </div>

      <div className="profile_picture">
        <img 
          src={profile.picture !== 'N/A' ? profile.picture : 'https://via.placeholder.com/400'} 
          alt={profile.name} 
        />
      </div>

      <div className="info">
        <h3>{profile.name}</h3>
        <h4>{profile.ID + " • " + profile.category}</h4>
      </div>
    </div>
  )
}

export default Card

关键修改说明 #

• 将TransitionsModal改为受控组件，通过父组件传递的open和onClose实现状态联动，让父组件能直接控制弹窗显示/隐藏
• Card组件移除无效的isShown状态，新增modalOpen专门管理弹窗，点击时直接根据auth状态触发弹窗
• 修正Modal中无效的原生onclick属性，统一使用React的onClick绑定关闭事件

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