c# - 单击 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 <a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a5cacc88e5c6c4d1c0c2cad7dc8becc6cacb" rel="noreferrer noopener nofollow">[email protected]</a>" 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();
}