Blazor中如何从一个组件触发另一个组件重新渲染？

你当前方案失效的核心原因是组件继承的使用逻辑完全错误：组件继承是类层面的代码复用机制，你让Product组件继承Cart组件后，调用的Reload()方法操作的是当前Product组件实例自身的CartItem属性，和页面上独立渲染的Cart组件实例没有任何关联，自然不可能触发目标Cart组件的UI重渲染。

下面给出两种生产环境常用的实现方案：

方案1：父组件作为事件中介（适合Product和Cart为兄弟组件的场景） #

通过父组件中转事件、传递最新的购物车参数，Cart组件接收到新参数会自动触发重渲染：

1. 父组件代码（例：Index.razor） #

<Product OnAddCartSuccess="HandleAddCart" />
<Cart CartItems="CurrentCartItems" />

@code {
    private List<Models.Cart> CurrentCartItems { get; set; }
    [Inject] private YourDbContext _context { get; set; }
    [Inject] private IHttpContextAccessor _httpContextAccessor { get; set; }
    [Inject] private UserManager<CustomUser> _userManager { get; set; }

    protected override void OnInitialized()
    {
        LoadCartData();
    }

    // 加载最新购物车数据
    private void LoadCartData()
    {
        var userId = _userManager.GetUserId(_httpContextAccessor.HttpContext.User);
        CurrentCartItems = _context.Cart.Where(i => i.CustomUserId == userId && !i.IsSold).ToList();
    }

    // 接收加购成功回调
    private void HandleAddCart()
    {
        LoadCartData();
    }
}

2. Product组件代码 #

@code {
    // 定义加购成功的回调事件
    [Parameter] public EventCallback OnAddCartSuccess { get; set; }

    public async Task AddToCart()
    {
        // 原有加购业务逻辑
        // ...

        // 通知父组件加购完成
        await OnAddCartSuccess.InvokeAsync();
    }
}

3. Cart组件代码 #

@code {
    [Parameter] public List<Models.Cart> CartItems { get; set; }
    // 不需要额外写重渲染逻辑，父组件更新参数后自动重绘
}

方案2：全局购物车状态服务（适合跨多层组件、全站点调用场景） #

通过注入Scoped级别的状态服务实现全局购物车状态同步，耦合度更低：

1. 定义并注册状态服务 #

首先创建CartStateService.cs：

public class CartStateService
{
    private readonly YourDbContext _context;
    private readonly IHttpContextAccessor _httpContextAccessor;
    private readonly UserManager<CustomUser> _userManager;
    // 购物车变更通知事件
    public event Action OnCartUpdated;

    public CartStateService(YourDbContext context, IHttpContextAccessor httpContextAccessor, UserManager<CustomUser> userManager)
    {
        _context = context;
        _httpContextAccessor = httpContextAccessor;
        _userManager = userManager;
    }

    // 获取当前用户购物车数据
    public List<Models.Cart> GetCurrentCart()
    {
        var userId = _userManager.GetUserId(_httpContextAccessor.HttpContext.User);
        return _context.Cart.Where(i => i.CustomUserId == userId && !i.IsSold).ToList();
    }

    // 触发购物车变更通知
    public void TriggerCartUpdate()
    {
        OnCartUpdated?.Invoke();
    }
}

在Program.cs中注册服务：

builder.Services.AddScoped<CartStateService>();

2. Product组件加购后触发通知 #

@inject CartStateService _cartState

@code {
    public async Task AddToCart()
    {
        // 原有加购业务逻辑
        // ...

        // 发送购物车更新通知
        _cartState.TriggerCartUpdate();
    }
}

3. Cart组件监听变更通知 #

@inject CartStateService _cartState
@implements IDisposable

@* 原有购物车UI渲染逻辑 *@

@code {
    private List<Models.Cart> CartItems { get; set; }

    protected override void OnInitialized()
    {
        // 订阅购物车更新事件
        _cartState.OnCartUpdated += LoadCartData;
        LoadCartData();
    }

    private void LoadCartData()
    {
        CartItems = _cartState.GetCurrentCart();
        StateHasChanged();
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        _cartState.OnCartUpdated -= LoadCartData;
    }
}

内容的提问来源于stack exchange，提问作者Duy Lan Le