Blazor 组件不刷新

Question

所以我有一个 Blazor 应用程序，其中用户登录并且 header 组件根据用户是否登录而变化。用户登录后，他们被重定向到主页，但 header 组件不会更新，除非我点击浏览器上的刷新按钮。我尝试使用 StateHasChanged()。这是我在 header 组件中的相关代码：

@using Newtonsoft.Json
@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager

@if (!string.IsNullOrWhiteSpace(FirstName))
{
    <div class="header-user-widget">
        <button class="btn btn-cart">
            Cart <span class="badge badge-cart">@CartCount</span>
        </button>
        <i class="fa fa-user-circle"></i> @FirstName @LastName
        <i class="fa fa-sign-out-alt header-sign-out" @onclick="SignOutClicked"></i>
    </div>
}

@code {
    private string FirstName { get; set; }
    private string LastName { get; set; }
    private int CartCount { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var page = NavManager.ToBaseRelativePath(NavManager.Uri).ToLower();
        var cookie = await JsRuntime.InvokeAsync<string>("Cookies.get", "Login");

        if (!page.StartsWith("login"))
        {
            if (string.IsNullOrWhiteSpace(cookie))
            {
                NavManager.NavigateTo("/Login");
                return;
            }
        }
        if (!string.IsNullOrWhiteSpace(cookie))
        {
            var decodedCookie = cookie.FromBase64String();

            FirstName = CookieHelper.GetValueFromKey(decodedCookie, "FirstName");
            LastName = CookieHelper.GetValueFromKey(decodedCookie, "LastName");
        }

        CartCount = await NumberOfItemsInCart();
    }
}

这是我的登录页面：

@page "/login"

@inject IJSRuntime JsRuntime
@inject NavigationManager NavManager

<LoginBox OnLoginButtonClick="@LoginButtonClicked" />

@code {

    private async Task LoginButtonClicked(LoginBoxReturnModel model)
    {
        var cookieString = $"UserId={model.UserId}|FirstName={model.FirstName}|LastName={model.LastName}|Email={model.EmailAddress}|IsAdmin={model.IsAdmin}";
        var encyptedString = cookieString.ToEncryptedBase64String();

        await JsRuntime.InvokeVoidAsync("Cookies.set", "Login", encyptedString);

        StateHasChanged(); // This line doesn't seem to have any effect
        NavManager.NavigateTo("/");
    }
}

用户登录后，他们会正确重定向到 "/" 页面，但 header 不会更新。如果我在浏览器中按 F5 键刷新它，那么 header 是正确的。我觉得正在发生的事情是应用程序在 StateHasChanged() 行有任何时间刷新之前导航，因此它永远不会刷新。如果是这种情况，我应该如何实施？

Answer 1

删除 StateHasChanged()，您从“/login”导航到“/”。 true 应该像 f5 那样强制加载 cookie。

NavManager.NavigateTo("/",true);

Blazor 组件不刷新

Blazor component not refreshing

c#

blazor

blazor-client-side

blazor-webassembly