单击 NavMenu 后 Blazor 不会更新

Question

我对 post 这件事犹豫不决，因为有很多“Blazor 在 X 之后不更新”的问题被问到。我得出的结论是，这是很多问题的常见错误。因此，在概述我的问题之前，我先简要描述一下我尝试过的方法。

调用 StateHasChanged(); 虽然可能更多的是变通，而不是优雅的解决方案。这可能仍然是暂时的答案。但是，我已将此函数调用放置在一系列地方，我谦虚地确定它会正确执行，但事实并非如此。

这是一个演示 gif。如您所见，URL 会发生变化，但页面不会刷新，直到我手动完成。刷新后一切正常。 Demonstration

这是我的 Index.blazor

@page "/"
@page "/{categoryurl}"
@inject ICategoryService CategoryService;
@using System.Security.Cryptography.X509Certificates

@if (category != null)
{
    <h1>Welcome to the @category.Name Section!</h1>
    <ProductList CategoryId="@category.Id" />
    

}
else
{
    <h1>Welcome to MyExampleWebsite</h1>
    <ProductList />
}


@code
{
    [Parameter]
    public string CategoryUrl { get; set; }

    private Category category = null;

    protected override void OnInitialized()
    {
        if (CategoryUrl != null)
        {
            category = CategoryService.Categories.FirstOrDefault(c => c.Url.ToLower().Equals(CategoryUrl.ToLower()));
            StateHasChanged();
        }
        else
        {
            category = null;
        }
    }
}

这是我的 NavMenu.Blazor

    @inject ICategoryService CategoryService
    
    <div class="top-row pl-4 navbar navbar-dark">
        <a class="navbar-brand" href="">My example Blazor</a>
        <button class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
    
    <div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
        <ul class="nav flex-column">
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                    <span class="oi oi-home" aria-hidden="true"></span> Home
                </NavLink>
            </li>
            
            <li class="dropdown-divider"></li>
            @foreach (var category in CategoryService.Categories)
            {
                <li class="nav-item px-3">
                    <NavLink class="nav-link" href="@category.Url" onClick="">
                        <span class="oi oi-@category.Icon" aria-hidden="true"></span> @category.Name 
                    </NavLink>
                </li>
            }
            
            @*Counter Page*@
            
            @*<li class="nav-item px-3">
                <NavLink class="nav-link" href="counter">
                    <span class="oi oi-plus" aria-hidden="true"></span> Counter
                </NavLink>
            </li>
            
            /*Fetch Data From server Page*/
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="fetchdata">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                </NavLink>
            </li>*@
        </ul>
    </div>
    
    @code {
        private bool collapseNavMenu = true;
    
        private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
    
        private void ToggleNavMenu()
        {
            collapseNavMenu = !collapseNavMenu;
        }
    
        protected override void OnInitialized()
        {
            CategoryService.LoadCategories();
        }
    
    }

这是我的分类Class

public class Category
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Url { get; set; }
        public string Icon { get; set; }

        public List<Product> Products { get; set; }
    }

Answer 1

您必须在 blazor 生命周期事件 OnParametersSet{Async} 上调用服务 Lifecycle events

因为 OnInitialized 仅在第一次渲染时运行。

protected override void OnParametersSet()
{
    CategoryService.LoadCategories();
}

单击 NavMenu 后 Blazor 不会更新

Blazor does not update upon NavMenu click

.net

c#

blazor

blazor-webassembly