Blazor CascadingParameter 点击事件触发函数调用后布局不更新问题咨询

• 事件执行时序冲突：提交按钮同时绑定了同步@onclick事件和EditForm的OnValidSubmit异步事件，Loading执行后的状态变更没有触发Layout自身的渲染通知，仅触发了子页面的渲染批处理
• 状态赋值顺序错误：原有登录失败分支先执行StopLoading再赋值错误提示，Layout重绘时子页面的错误信息还未完成状态同步，导致报错信息无法展示
• 直接同步调用StateHasChanged存在线程上下文冲突，会打断子页面的状态更新流程，导致子页面的状态变更丢失

1. 调整MainLayout实现 #

将加载状态改为私有属性，在状态变更方法中使用InvokeAsync包装StateHasChanged，保证渲染通知是线程安全的，不会打断当前上下文的其他状态更新，同时给级联参数加IsFixed优化性能：

<CascadingValue Value="this" IsFixed="true">
@if (load)
{
    <h2>Loading...</h2>
} else
{
    @Body
}
</CascadingValue>

@code 
{ 
   private bool load = false;

   public async Task Loading()
   {
      load = true;
      await InvokeAsync(StateHasChanged);
   }

   public async Task StopLoading()
   {
      load = false;
      await InvokeAsync(StateHasChanged);
   }
}

2. 调整页面提交逻辑 #

去掉按钮上的@onclick绑定，将加载触发逻辑移到TriggerLogin最开头，避免两个事件的时序冲突：

<EditForm Model="@user" OnValidSubmit="@TriggerLogin">
   <InputText id="name" placeholder="Email" @bind-Value="user.Username" inputmode="email" />
   <InputText id="password" placeholder="Mot de passe" @bind-Value="user.Password" type="password" inputmode="text" />
   <button class="button-pink" type="submit">Se connecter</button>
</EditForm>

3. 调整TriggerLogin实现 #

如果members.Login是同步方法，用Task.Run包装避免阻塞UI线程，所有Layout的状态方法都加await等待渲染完成；调整登录失败分支的执行顺序，先赋值错误信息，触发子页面自身的状态更新后再停止加载：

private async Task TriggerLogin()
{
    await Layout.Loading();
    bool loginSuccess = await Task.Run(() => members.Login(user));
    if (loginSuccess)
    {
        // 处理access token逻辑
        await Layout.StopLoading();
        NavigationManager.NavigateTo("/commandes");
    }
    else
    {
        // 先赋值错误信息，触发子页面渲染
        error = "Wrong password or username";
        await InvokeAsync(StateHasChanged);
        // 再停止加载，触发Layout重绘
        await Layout.StopLoading();
    }
}

InvokeAsync(StateHasChanged)会将渲染通知推到Blazor UI单线程的任务队列末尾，会等当前上下文所有的状态更新（包括子页面的错误信息赋值）全部处理完成后再执行Layout的重绘，既不会出现状态更新丢失的问题，也能保证Layout的加载状态正常切换。

内容的提问来源于stack exchange，提问作者Lal