Blazor WebAssembly + MudBlazor页面重复渲染及值更新问题求助

问题1：组件初始化一次但渲染两次 #

Blazor WebAssembly在开发模式下，因.NET热重载机制特性，组件常会出现初始渲染两次的情况，这属于开发环境正常现象，生产模式下不会出现。若需验证，可发布生产版本测试，渲染次数会恢复正常。

若要在开发模式下避免该情况，可关闭热重载：

• Visual Studio中点击工具栏"热重载"按钮禁用；
• 或在Properties/launchSettings.json中将hotReloadEnabled设为false。

问题2：Enter键后message更新延迟、按键触发重渲染 #

核心问题：async void导致异步上下文丢失 #

OnKeyPressed使用async void是错误写法——Blazor无法追踪async void方法的异步操作完成状态，更新message后无法自动触发组件重渲染，导致值延迟显示。

修复步骤： #

1. 将async void改为async Task
   Blazor要求异步事件处理方法返回Task，框架才能正确管理异步流程并触发重渲染。

2. 优化按键重渲染问题
   MudTextField的Immediate="true"会在每次按键时更新绑定的Barcode值，进而触发组件重渲染。若不需要实时更新Barcode，可移除该属性，改为仅在输入完成（如失去焦点或按下Enter）后更新值。

修改后完整代码： #

@page "/Test"
@using System.ComponentModel.DataAnnotations;

<h1>@message</h1>
<MudTextField Required="true"
              OnKeyPress="OnKeyPressed"
              Margin="Margin.Dense"
              T="Int64"
              @bind-Value="@Barcode"
              Label=""
              Variant="Variant.Outlined"
              Adornment="Adornment.Start"
              AdornmentIcon="@Icons.Material.Filled.Person">
</MudTextField>

@if (Barcode > 0)
{
    <MudTextField Label="message" @bind-Value="@message" Variant="Variant.Outlined"></MudTextField>
}

@code {
    public Int64 Barcode { get; set; }
    string message;

    protected override async Task OnInitializedAsync()
    {
        message = "Hello";
        Barcode = 0;
    }

    public async Task OnKeyPressed(KeyboardEventArgs e)
    {
        if (e.Key == "Enter")
        {
            await Task.Delay(TimeSpan.FromSeconds(4));
            message = "Hello again";
            // 若仍存在延迟，可手动调用强制更新
            // StateHasChanged();
        }
    }
}

补充说明： #

• 改为async Task后，Blazor会在异步操作完成后自动触发重渲染，message值会及时显示；
• 移除Immediate="true"后，仅在输入框失去焦点或按下Enter时更新Barcode，减少不必要的重渲染；
• 极端情况下（异步操作脱离Blazor上下文），可手动调用StateHasChanged()强制更新，上述修改后通常无需额外操作。

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