React项目DeleteButton失效及Confirm组件属性冲突问题排查

问题现象 #

• 点击删除按钮后无任何反馈，既不弹出确认删除的弹窗，也无法执行删除操作
• 尝试两种写法均存在问题：
  • 将Confirm组件的属性写在标签内部时，点击按钮不会触发弹窗
  • 按常规写法将属性放在标签上时，控制台出现错误：Warning: Failed prop type: Prop 'cancelButton' in 'Confirm' conflicts with props: 'children'

错误原因 #

1. 属性传递方式错误：第一种写法中，将open、onCancel等属性作为文本内容放在<Confirm>标签内部，React不会将这些识别为组件的props，仅会当作普通文本节点处理，导致弹窗的显示状态无法被正确控制。
2. 组件props冲突：Semantic UI React的Confirm组件默认会自动生成确认和取消按钮，若给组件添加自定义子节点，会与组件内置的cancelButton、confirmButton等props产生冲突，触发警告。

修复方案 #

修正Confirm组件的props传递方式，直接将配置属性写在组件标签上，且不添加自定义子节点：

修复后的DeleteButton.js代码 #

import React, { useState } from 'react';
import gql from 'graphql-tag';
import { useMutation } from '@apollo/client';
import { Button, Confirm, Icon } from 'semantic-ui-react';
import { FETCH_POSTS_QUERY } from '../util/graphql';

function DeleteButton({ postId }) {
    const [confirmOpen, setConfirmOpen] = useState(false);

    const [deletePost] = useMutation(DELETE_POST_MUTATION, {
        variables: { postId },
        update(proxy) {
            setConfirmOpen(false);
            // 更新缓存，移除已删除的帖子
            const data = proxy.readQuery({
                query: FETCH_POSTS_QUERY
            });

            proxy.writeQuery({
                query: FETCH_POSTS_QUERY,
                data: {
                    getPosts: data.getPosts.filter(p => p.id !== postId)
                }
            });
        },
        onError(err) {
            console.error('删除帖子出错:', err);
        }
    });

    return (
        <>
            <Button 
                as="div" 
                color="red" 
                floated="right" 
                onClick={() => setConfirmOpen(true)}
            >
                <Icon name="trash" style={{ margin: 0 }}/>
            </Button>
            {/* 正确传递props到Confirm组件标签上，无自定义子节点 */}
            <Confirm
                open={confirmOpen}
                onCancel={() => setConfirmOpen(false)}
                onConfirm={deletePost}
                content="确定要删除这篇帖子吗？" // 可选：自定义弹窗提示内容
            />
        </>
    );
}

const DELETE_POST_MUTATION = gql`
    mutation deletePost($postId: ID!) {
        deletePost(postId: $postId)
    }
`;

export default DeleteButton;

验证说明 #

修复后点击删除按钮会正常弹出确认弹窗：

• 点击「Cancel」会关闭弹窗，不执行删除操作
• 点击「OK」会触发删除mutation，同时更新Apollo缓存，页面上的帖子会被移除

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