React模态框点赞后同步更新主页面点赞状态的实现方法

问题出在Interactions组件维护了独立的本地状态，点击点赞后只更新了自己内部的fillIcon，没有把状态变化同步回上层组件，导致主页面的isLiked始终是旧值。要解决这个问题，需要让点赞状态变成受控状态，把状态的管理权交给共同的父组件，同时通过回调同步状态变化。

1. 改造Interactions组件，去掉本地状态，改用父传状态+回调 #

删掉组件内部的fillIcon状态，直接使用父组件传入的isLiked，同时新增onLikeToggle回调，点击按钮时通知父组件切换状态：

export const Interactions: React.FC<InteractionsProps> = ({ isLiked, onLikeToggle }) => {
    const LikedIcon = bundleIcon(ThumbLikeFilled, ThumbLikeRegular);

    // 直接使用父组件传入的isLiked，不再维护本地状态
    const iconStyleProps: FluentIconsProps = {
        filled: isLiked
    }
    
    return (
        <Button 
            icon={<LikedIcon {...iconStyleProps}/>} 
            onClick={() => onLikeToggle()} 
        />
    );
};

// 补充Props类型定义
interface InteractionsProps {
    isLiked: boolean;
    onLikeToggle: () => void;
}

2. 修改DialogPreview组件，传递点赞回调 #

让DialogPreview从父组件（主页面）接收onLikeToggle，再传递给内部的Interactions：

export const DialogPreview: React.FC<DialogPreviewProps> = ({ dialogInfo, isLiked, onLikeToggle }) => {
    const styles = useStyles();
    return (
        <div className={styles.main}>
            <div className={styles.body}>
                <div>
                    <DialogBody dialogInfo={dialogInfo} />
                </div>
                <div>
                    <Interactions isLiked={isLiked} onLikeToggle={onLikeToggle}/>
                </div>
            </div>
        </div>
    );
}

// 补充Props类型定义
interface DialogPreviewProps {
    dialogInfo: any; // 替换成你实际的业务类型
    isLiked: boolean;
    onLikeToggle: () => void;
}

3. 同步改造VideoCardFooter组件（可选，若主页面卡片也需点赞） #

如果主页面的卡片点赞也要同步状态，同样给VideoCardFooter加上onLikeToggle：

export const VideoCardFooter: React.FC<VideoCardFooterProps> = ({
    isLiked,
    onLikeToggle
}) => {
    return (
        <div className="video-card-footer"> {/* 注意标签名不要和组件名重复 */}
            <Interactions isLiked={isLiked} onLikeToggle={onLikeToggle}/>
        </div>
    );
};

// 补充Props类型定义
interface VideoCardFooterProps {
    isLiked: boolean;
    onLikeToggle: () => void;
}

4. 在主组件中维护全局点赞状态 #

在包含VideoCard和DialogPreview的最上层组件中，统一维护isLiked状态，并传递给所有需要的子组件：

export const MainPage: React.FC = () => {
    const [isLiked, setIsLiked] = React.useState(false);
    const [isDialogOpen, setIsDialogOpen] = React.useState(false);
    const dialogInfo = { /* 你的详情数据 */ };

    const handleLikeToggle = () => {
        // 切换点赞状态，这里可同时调用接口更新后端数据
        setIsLiked(prev => !prev);
    };

    return (
        <div>
            {/* 主页面卡片 */}
            <VideoCardFooter isLiked={isLiked} onLikeToggle={handleLikeToggle}/>
            
            {/* 打开模态框按钮 */}
            <Button onClick={() => setIsDialogOpen(true)}>查看详情</Button>
            
            {/* 模态框 */}
            <Dialog open={isDialogOpen} onClose={() => setIsDialogOpen(false)}>
                <DialogPreview 
                    dialogInfo={dialogInfo} 
                    isLiked={isLiked} 
                    onLikeToggle={handleLikeToggle}
                />
            </Dialog>
        </div>
    );
};

所有组件共用同一个isLiked全局状态，不管点击主页面还是模态框的点赞按钮，都会触发handleLikeToggle更新全局状态，所有依赖该状态的组件会自动重新渲染，保持状态同步。关闭模态框后，主页面的状态已经是更新后的，自然会显示正确的点赞状态。

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