Blazor页面初始化调用modal.ShowAsync()触发空引用异常求助

问题分析 #

你在OnInitializedAsync中调用OnShowModalClick触发空引用，核心原因是组件生命周期顺序限制：

• OnInitializedAsync在组件初始化阶段执行，此时<Modal>组件还未完成DOM渲染，@ref="modal"绑定的实例还未被赋值，modal变量处于null状态。
• 点击按钮触发时，组件已经完成完整渲染流程，modal实例已正常初始化，因此能成功调用ShowAsync。

解决方案 #

改用OnAfterRenderAsync生命周期方法，它会在组件渲染完成后执行，此时@ref绑定的modal实例已存在。同时通过firstRender参数确保Modal只在页面首次加载时弹出一次。

修改后的ShowModal.razor代码 #

<Modal @ref="modal" Title="Modal title">
    <BodyTemplate>
        @sMessage
    </BodyTemplate>
    <FooterTemplate>
        <Button Color="ButtonColor.Secondary" @onclick="OnHideModalClick">Close</Button>
    </FooterTemplate>
</Modal>

@code {
    [CascadingParameter]
    public string sMessage { get; set; }

    [CascadingParameter]
    public bool bShowModal { get; set; } = false;

    private Modal modal;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await OnShowModalClick();
        }
    }

    private async Task OnShowModalClick()
    {
        await modal?.ShowAsync();
    }

    private async Task OnHideModalClick()
    {
        await modal?.HideAsync();
    }
}

可选扩展 #

如果需要通过bShowModal参数控制Modal是否自动弹出，可以在方法中加入条件判断：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender && bShowModal)
    {
        await OnShowModalClick();
    }
}

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