StateHasChanged() 不会重新加载页面

Question

问题：

如标题中所述，状态已更改不会重新呈现页面

目的：

我想在单击按钮时刷新页面

当前代码

<button @onclick="CreatePlayer">Create User</button>

@functions {
string username;
[CascadingParameter]
Task<AuthenticationState> authenticationStateTask { get; set; }
async Task CreatePlayer()
{
var authState = await authenticationStateTask;
var user = authState.User;
var player = await PlayerData.GetByEmail(user.Identity.Name);
if (player == null)
{
player = new Player()
{
Email = user.Identity.Name,
UserName = username
};
await PlayerData.Create(player);
}
await Task.Delay(50);
StateHasChanged();
}
}

Answer 1

只是为了记录，我在答案中添加我的评论：

StateHasChanged只是通知组件某些内容发生了变化，不会重新渲染它。组件自行选择是否必须重新渲染。您可以覆盖ShouldRender以强制组件在状态更改时重新渲染。

@code {
bool _forceRerender;
async Task CreatePlayer()
{
var authState = await authenticationStateTask;
var user = authState.User;
var player = await PlayerData.GetByEmail(user.Identity.Name);
if (player == null)
{
player = new Player()
{
Email = user.Identity.Name,
UserName = username
};
await PlayerData.Create(player);
}
_forceRerender = true;
StateHasChanged();
}
protected override bool ShouldRender()
{
if (_forceRerender)
{
_forceRerender = false;
return true;
}
return base.ShouldRender();
}
}

Answer 2

一方面，你告诉编译器她应该为单击事件创建一个事件处理程序，名为 CreatePlayer：@onclick="CreatePlayer。此属性编译器指令在后台为您创建一个EventCallback<Task>处理程序，其含义是您根本不需要在代码中使用 StateHasChanged，因为此方法 ( StateHasChanged ( 是在 UI 事件发生后自动调用的。

另一方面，您告诉编译器按钮的类型应设置为"提交"。这当然是错误的...你不能两者兼而有之。将 type 属性设置为"提交"，通常会将表单数据提交到服务器，但在 Blazor 中，通过 Blazor 的 JavaScript 部分中的代码阻止它以这种方式工作。是否要将表单数据提交到服务器？永远记得 Blazor 是一个 SPA 应用程序。不提交 ？

您的代码应该是：

<button @onclick="CreatePlayer" >Create User</button>

只是为了记录，通常您应该将AuthenticationStateProvider对象注入到组件中，如下所示：

@inject AuthenticationStateProvider AuthenticationStateProvider

，然后检索身份验证状态对象。这是重写代码的方式：

var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync();
var user = authState.User;