Blazor TypeError：无法在 Object.e 处读取 null 的属性“removeChild”[作为 removeLogicalChild]

Posted 2023-02-22

【中文标题】Blazor TypeError：无法在 Object.e 处读取 null 的属性“removeChild”[作为 removeLogicalChild]

【英文标题】：Blazor TypeError: Cannot read property 'removeChild' of null at Object.e [as removeLogicalChild]

【发布时间】：2020-02-12 07:46:36

【问题描述】：

我为双列表框创建了一个组件。一切都很好，但是当我提交时出现错误。

 <EditForm Model="Model.Report" class="kt-form" OnValidSubmit="Model.OnSearch">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit Columns</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-12">
                            <Project.Components.DualListbox ReportColumns="Model.Report.ReportColumns" Id="ReportColumns" @bind-Value="@Model.Report.ReportColumns"></Project.Components.DualListbox>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-sm" @onclick="Model.OnCloseModal"><i class="la la-close"></i> Close</button>
                    <button type="submit" class="btn btn-primary btn-sm"><i class="la la-exchange"></i> Change</button>
                </div>
            </EditForm>

DualListbox剃刀代码：

@typeparam TValue
@inherits InputBase<TValue>


@if (ReportColumns != null)

    <select id="@Id" class="kt-dual-listbox" multiple>

        @foreach (var column in ReportColumns.OrderBy(c => c.Sort))
        
            if (column.IsChecked == 1)
            
                <option value="@column.Id" selected>@column.Title</option>
            
            else
            
                <option value="@column.Id">@column.Title</option>
            
        
    </select>

*DualListbox 代码隐藏 *:

using Project.Models;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.JSInterop;
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Threading.Tasks;

namespace Project.Components

    public partial class DualListbox<TValue> : InputBase<TValue>
    
        [Parameter] public string Id  get; set; 
        [Inject] IJSRuntime JSRuntime  get; set; 
        [Parameter] public ICollection<ReportColumn> ReportColumns  get; set; 

        public DotNetObjectReference<DualListbox<TValue>> DotNetRef;
        [Parameter] public EventCallback<object> OnChanged  get; set; 
        protected override bool TryParseValueFromString(string value, out TValue result, out string validationErrorMessage)
        
            try
            
                if (value == "null")
                
                    value = null;
                
                if (typeof(TValue) == typeof(string))
                
                    result = (TValue)(object)value;
                    validationErrorMessage = null;

                    return true;
                
                else if (typeof(TValue) == typeof(int) || typeof(TValue) == typeof(int?))
                
                    int.TryParse(value, NumberStyles.Integer, CultureInfo.InvariantCulture, out var parsedValue);
                    result = (TValue)(object)parsedValue;
                    validationErrorMessage = null;

                    return true;
                

                throw new InvalidOperationException($"GetType() does not support the type 'typeof(TValue)'.");
            
            catch (Exception ex)
            
                throw ex;
            
        

        protected override void OnInitialized()
        
            base.OnInitialized();
            DotNetRef = DotNetObjectReference.Create(this);
        

        protected override async Task OnAfterRenderAsync(bool firstRender)
        
            await base.OnAfterRenderAsync(firstRender);
            if (firstRender)
            
                await JSRuntime.InvokeVoidAsync("dualListboxComponent.init", Id, DotNetRef, "Change_SelectWithFilterBase");
            
        

        [JSInvokable("Change_SelectWithFilterBase")]
        public void Change(string value)
        
            try
            
                if (value == "null")
                
                    value = null;
                

                var array = value.Split("#");
                if (array[0] == "add")
                
                    int _value = int.Parse(array[1]);
                    var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault();
                    report.IsChecked = 1;
                
                else
                
                    int _value = int.Parse(array[1]);
                    var report = ReportColumns.Where(c => c.Id == _value).FirstOrDefault();
                    report.IsChecked = 0;
                 

            
            catch (Exception ex)
            
                throw ex;
            

            if (OnChanged.HasDelegate)
                OnChanged.InvokeAsync(value);
        
    

[2020-02-12T07:42:28.867Z] 错误：应用批次 7 时出错。 e.log @ blazor.server.js:15 blazor.server.js:8 未捕获（承诺）

TypeError：无法读取 null 的属性“insertBefore” 在 Object.s [作为 insertLogicalChild] (blazor.server.js:8) 在 e.insertText (blazor.server.js:8) 在 e.insertFrame (blazor.server.js:8) 在 e.applyEdits (blazor.server.js:8) 在 e.updateComponent (blazor.server.js:8) 在 Object.t.renderBatch (blazor.server.js:1) 吃。 (blazor.server.js:15) 在 blazor.server.js:15 在 Object.next (blazor.server.js:15) 在 blazor.server.js:15 blazor.server.js:15 [2020-02-12T07:42:28.926Z] 错误：System.AggregateException：一或 发生了更多错误。 （类型错误：无法读取属性“insertBefore” 为空）---> System.InvalidOperationException：TypeError：不能 读取 null 的属性“insertBefore” Microsoft.AspNetCore.Components.RenderTree.Renderer.InvokeRenderCompletedCallsAfterUpdateDisplayTask（任务 updateDisplayTask, Int32[] updatedComponents) --- 内部结束 异常堆栈跟踪---

【参考方案1】：

因此，这可能不是您的确切答案，但它可能会为偶然发现这个 SO 问题的人提供线索。在我的例子中，这是在按钮文本中换出 Font Awesome 图标而不是使用两个单独的按钮的结果。

这可能是相关的，因为您将 JSRuntime 与“report.IsChecked = 1;”结合使用语法，我假设它正在更改 Blazor Server 尝试（但无法）跟踪的 UI 元素状态客户端。

当我在单个按钮中使用条件逻辑来换出图标时，我收到一个错误，“blazor TypeError: Cannot read property 'removeChild' of null”。 但是，这种使用两个单独按钮的语法效果很好：

@if (AllowAllPartners)

    <button @onclick="(() => AllowAllPartnersToggle())">
        <i class="far fa-check-square"></i>
    </button>

else

    <button @onclick="(() => AllowAllPartnersToggle())">
        <i class="far fa-square"></i>
    </button>

【讨论】：

字体真棒图标在运行时更改的问题完全相同。也是完全相同的图标。如果您找到不那么讨厌的解决方案，请告诉我。

啊，这完全是字体很棒的 svg 图标。他们已经替换了 dom 中呈现的图标。

你是传奇

【参考方案2】：

我的问题也出在 FontAwesome。就我而言，将图标放在<span></span> 中解决了问题。

   @if (conditional)
            
                <span>
                    <i class="fas fa-check"></i>
                </span>
            
            else
            
                <span>
                    <i class="fas fa-times"></i>
                </span>
            

【讨论】：

这个问题今天仍然存在，这也为我解决了这个问题。感谢 @Diego 分享此修复程序。

@Diego 你知道为什么我们必须为每个条件重复<span> 标签吗？因为我试图在整个 if/else 周围添加一个 tag 并且我得到了同样的错误！

【参考方案3】：

在我的情况下，同样的错误是由我使用 Bootstrap Dismissible Alerts 引起的，其中包含一个 MatBlazor 组件和/或 FontAwesome 图标。

将警报放在另一个 <div></div> 中解决了这个问题。将图标/组件放在<span></span> 内的警报中不起作用，但由于 Diego 的建议，我找到了这个解决方案 :-)

   <div>
      <div class="alert alert-warning alert-dismissible fade show" role="alert">
          Warning Text <MatTooltip Tooltip="Tooltip text" Context="_context1" Wrap="true" Position="@MatTooltipPosition.Top"><i class="far fa-question-circle"></i></MatTooltip>
          <button type="button" class="close" data-dismiss="alert" aria-label="Close">
             <span aria-hidden="true">&times;</span>
          </button>
       </div>
    </div>

【讨论】：

我没有使用 MatBlazor 组件或 FontAwesome 图标，但 试图在 blazor Web 程序集项目的 razor 页面顶部实现可关闭的警报。将其添加到 div 中没有问题。谢谢！