带有空字段的submit形式与错误打破连接：无法读取null的属性（读取'removechild'））

Question

我有这个燃烧的文本编辑器，我正在尝试编辑博客项目，问题是当我尝试提交带有空标题的博客时，它会打破连接和应用程序冻结。 收到的错误是：

System.AggregateException: One or more errors occurred. (TypeError: Cannot read properties of null (reading 'removeChild'))
 ---> System.InvalidOperationException: TypeError: Cannot read properties of null (reading 'removeChild')
   at Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask(Task updateDisplayTask, Int32[] updatedComponents)

这是组件

@using BlazorBlog.Application.Features.Blogs.Commands.Edit

@inherits MudComponentBase

@inject IValidationService Validator
@inject IMediator Mediator

<MudDialog style="min-height: 650px;">
    <DialogContent>
        <MudForm Model="@Model" @ref="@_form" Validation="@(Validator.ValidateValue(Model))">
            <MudGrid>
                <MudItem xs="12">
                    <MudTextField Label="Blog Title" @bind-Value="Model.Title" For="@(() => Model.Title)"
                                  Required RequiredError="@string.Format(ConstantString.RequiredText, "Blog Title")">
                    </MudTextField>
                </MudItem>
                <MudItem xs="12">
                    <BlazoredTextEditor @ref="@RichEditor">
                        <ToolbarContent>
                            <span class="ql-formats">
                                <select class="ql-font">
                                    <option selected=""></option>
                                    <option value="serif"></option>
                                    <option value="monospace"></option>
                                </select>
                                <select class="ql-size">
                                    <option value="small"></option>
                                    <option selected=""></option>
                                    <option value="large"></option>
                                    <option value="huge"></option>
                                </select>
                            </span>
                            <span class="ql-formats">
                                <button class="ql-bold"></button>
                                <button class="ql-italic"></button>
                                <button class="ql-underline"></button>
                                <button class="ql-strike"></button>
                            </span>
                            <span class="ql-formats">
                                <select class="ql-color"></select>
                                <select class="ql-background"></select>
                            </span>
                            <span class="ql-formats">
                                <button class="ql-list" value="ordered"></button>
                                <button class="ql-list" value="bullet"></button>
                                <button class="ql-indent" value="-1"></button>
                                <button class="ql-indent" value="+1"></button>
                                <select class="ql-align">
                                    <option selected=""></option>
                                    <option value="center"></option>
                                    <option value="right"></option>
                                    <option value="justify"></option>
                                </select>
                            </span>
                            <span class="ql-formats">
                                <button class="ql-link"></button>
                            </span>
                        </ToolbarContent>
                        <EditorContent>
                            @((MarkupString)Model.Description)
                        </EditorContent>
                    </BlazoredTextEditor>
                </MudItem>
            </MudGrid>
        </MudForm>
    </DialogContent>
    <DialogActions>
        <MudButton Variant="Variant.Outlined" OnClick="Cancel">@ConstantString.Cancel</MudButton>
        <MudLoadingButton Variant="Variant.Outlined" Loading="@_saving" OnClick="Submit">@ConstantString.SaveChanges</MudLoadingButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] private IMudDialogInstance MudDialog { get; set; } = default!;
    [EditorRequired][Parameter] public EditBlogCommand Model { get; set; } = default!;
    [Parameter] public Action? Refresh { get; set; }
    private MudForm? _form;
    private bool _saving;
    BlazoredTextEditor RichEditor;

    private async Task Submit()
    {
        try
        {
            _saving = true;

            await _form.Validate().ConfigureAwait(false);

            try
            {
                Model.Description = await RichEditor.GetHTML();
            }
            catch (Exception)
            {
                return;
            }

            if (!_form!.IsValid) { return; }

            var result = await Mediator.Send(Model);

            if (result.Succeeded)
            {
                MudDialog.Close(DialogResult.Ok(true));
                Snackbar.Add(ConstantString.SaveSuccess, Severity.Info);
            }
            else
            {
                Snackbar.Add(result.ErrorMessage, Severity.Error);
            }
        }
        finally
        {
            _saving = false;
        }
    }

    private void Cancel()
    {
        MudDialog.Cancel();
    }
}

我试图重构此组件，但这给了我一些从编辑器获取文本的问题。

Answer 1

@((MarkupString)Model.Description)

您需要用

RichEditor.GetHTML()

检索该值
Blazored Text Editor在其GitHub页面上有一些很棒的示例：

https：//github.com/blazored/texteditor/tree/main

发生错误是因为文本编辑器正在操纵与闪电相同的DOM。这会产生不匹配并触发错误。