如何在Blazor中从另一个组件重新渲染组件?

11
我有一个电子商务的Blazor Server项目,我想在从产品组件添加商品到购物车后重新渲染购物车组件。我尝试继承购物车组件到产品组件,并运行购物车组件的公共方法来重新渲染它的组件。
产品组件中的添加到购物车方法。

Product.Razor

 public async Task AddToCart()
{
    //The adding logic in this area

    StateHasChanged();
    Reload(); // this method is inherited from the Cart Component trying to re-render the Cart Component
    //Does not work
}

Cart.Razor

[Parameter]
public List<Models.Cart> CartItem { get; set; }

protected override void OnInitialized()
{
    CartItem = _context.Cart.Where(i => i.CustomUserId == _userManager.GetUserId(_httpContextAccessor.HttpContext.User) && !i.IsSold).ToList();
}


public void Reload()
{

    OnInitialized();
    StateHasChanged();

}

方法成功运行,但界面没有按照我想要的方式重新渲染。
我以为当我运行OnInitialized()方法和StateHasChanged()方法时,界面会重新渲染?
编辑:我更新了Reload()方法,并在AddToCart()方法的末尾调用它,但它不起作用 :(

Cart.Razor

 protected override void OnParametersSet()
{
    CartItem = _context.Cart.Where(i => i.CustomUserId == _userManager.GetUserId(_httpContextAccessor.HttpContext.User) && !i.IsSold).ToList();
}


public void Reload()
{
    OnParametersSet(); //updated but still not working
    StateHasChanged();

}

Product.Razor

public async Task AddToCart()
    {
        //The adding logic in this area

        Reload(); // this method is inherited from the Cart Component trying to re-render the Cart Component
        //Does not work
        StateHasChanged();
    }

你提供的代码并没有给我足够的信息来了解你是如何呈现这些组件的。它们在同一页上吗?你的购物车控件在主布局上吗?你是否将其中一个作为另一个的子元素? - Bennyboy1973
2个回答

11
从Cart继承并不意味着您查看的是项目中“其他”购物车的相同实例。您继承了Cart类(即定义),而不是正在运行的组件。
您有两种解决方法:
使用共同的父组件
1.将Product.razor和Cart.razor作为共同父组件的子组件。 2.在Product.razor中,添加商品到购物车后触发OnItemAdded事件。 3.在父组件中捕获此事件。 4.从父组件调用正在运行的Cart Component的Reload() 实例。(有关组件的@ref属性,请参见:https://blazor-university.com/javascript-interop/calling-javascript-from-dotnet/passing-html-element-references/)。
使用事件广播器
1.创建事件广播服务(https://morioh.com/p/a5df9450ff5e)。 2.在Product.razor中,添加商品到购物车后广播一条消息。 3.在Cart.razor中监听该消息。 4.当收到该消息时,在Cart.razor中更新视图。

但是他正在使用Blazor Server而不是Web Assembly。 - Kevin Hudson
1
为什么在 Blazor Server 中它不能工作?我看不出有任何问题。 - Gaël James
答案中的第一个建议适用于WebAssembly或Blazor Server。但是,第二个教程专注于WebAssembly服务,而不是Blazor Server。 - Neil W

-2
如果你正在寻找一个更复杂的场景和状态管理,我推荐你看一下Blazor中的Redux模式。
在这里,你可以找到Fluxor仓库和YouTube视频,解释了它是如何工作的以及如何在组件之间共享状态。

https://github.com/mrpmorris/Fluxor


虽然这个链接可能回答了问题,但最好在这里包含答案的关键部分,并提供链接作为参考。仅有链接的答案如果链接页面发生变化可能会失效。- 来自审核 - desertnaut
@desertnaut 我认为只是说使用Redux模式就足够了。Fluxor只是一个在Blazor中实现该模式的库。将这个回答添加到一个两年前的问题中,我认为可能会有用,并且不会被降级为错误,因为它仍然是比标记为正确答案的那个更好的解决方案。 - Catalin Cernea

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接