如何从动态映射的MUI卡片打开Dialog并填充对应GroupName数据

核心逻辑：新增独立状态存储当前点击卡片对应的分组数据，点击按钮时同步传入当前分组信息到状态中，弹窗直接读取该状态渲染对应内容。

第一步：修改状态与弹窗控制逻辑 #

原有代码缺少当前选中分组的存储逻辑，修改后代码如下：

// 保留原有状态，新增当前选中分组的存储状态
const [questionGroups, setQuestionGroups] = useState("");
const [qDialogOpen, setQDialogOpen] = useState(false);
const [currentGroup, setCurrentGroup] = useState(null); 

// 修改弹窗打开方法，支持接收分组参数
const openQuestionsDialog = (group) => {
    setCurrentGroup(group); // 存储当前点击的分组数据
    setQDialogOpen(true); // 触发弹窗打开
};

const handleDialogClose = () => {
    setQDialogOpen(false);
    setCurrentGroup(null); // 关闭时清空选中分组，可选操作
};

function QuestionsDialog() {
    return (
        <Dialog open={qDialogOpen} onClose={handleDialogClose} maxWidth={"xl"}>
            {/* 读取当前选中分组的名称渲染，加可选链避免初始空值报错 */}
            <DialogTitle id="form-dialog-title">{currentGroup?.GroupName || ''}</DialogTitle>
            <DialogActions>
                <Button onClick={handleDialogClose}>OK</Button>
            </DialogActions>
        </Dialog>
    );
}

第二步：修改卡片按钮的点击传参 #

渲染卡片列表时，给按钮点击事件传入当前循环的分组数据：

function DisplayCards() {
    return (
        <div>
            {questionGroups?.displaygroups?.IntakeValidations?.map((group, groupIndex) => {
                return (
                    // 补充key属性，优先用数据唯一标识GroupId，避免用下标导致渲染异常
                    <Card className={classes.card} key={group.GroupId}>
                        <CardHeader className={classes.cardTitle} title={group.GroupName} subheader={group.OwnerName} />
                        <CardActions className={classes.cardActions}>
                            {/* 用箭头函数包裹，传入当前循环的group参数 */}
                            <Button className={classes.cardBtns} onClick={() => openQuestionsDialog(group)}>
                                Edit {group.GroupName} Answers
                            </Button>
                        </CardActions>
                    </Card>
                );
            })}
        </div>
    );
}

补充说明 #

• 后续如果弹窗需要展示分组下的其他关联字段（比如OwnerName、GroupId、关联题目列表等），直接从currentGroup状态中读取即可，不需要额外修改弹窗控制逻辑
• 读取currentGroup属性时务必加可选链?.，避免初始状态为null时读取属性抛出JS错误

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