单击 NavMenu 时 Blazor 不会更新

Question

由于大量“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();
        }
    
    }

这是我的类别类

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();
}