Blazor Webassembly：对象引用未设置为对象 i 的实例

Posted 2023-03-27

【中文标题】Blazor Webassembly：对象引用未设置为对象 i 的实例

【英文标题】：Blazor Webassemby: Object reference not set to an instance of an object i

【发布时间】：2021-09-13 13:59:13

【问题描述】：

当表格填满数据时，页面会抛出 NullReferenceException。所有数据都已填充（模拟数据）。没有空值的情况。当它试图调用“context.consultant.FullName”时，它会抛出一个异常。 我也调试过了。所有数据都设置好了。

页面：

  @if (list != null)
  
        <AntDesign.Table @ref="table"
                         TItem="Customer"
                         DataSource="@list">

        <Column @bind-Field="@context.Id" />
        <Column @bind-Field="@context.Name"  />
        <Column @bind-Field="@context.LastName"  />
        
        <Column Field="@context.consultant.FullName"  />  --> throws here the exception.
    </AntDesign.Table>

@code

 ...

  protected override async Task OnInitializedAsync()
  
    list = GetCustomers()
   

   private List<Customer> GetCustomers()
   
     var consultant = new Consultant
            
                ID = "183",
                FirstName = "Service",
                LastName = "Team";
            ;
            
            
        return new Customer[]
        
            new()
            ID = "3",
            FirstName = "Peter",
            LastName = "Fox";
            Consultant = consultant
            ,
            new()
            ID = "4",
            FirstName = "John",
            LastName = "Fox";
            Consultant = consultant
            ,
        .ToList();
    
    

型号：

public Customer
    public string ID  get; set; 
    public string FirstName  get; set; 
    public string LastName  get; set; 
    public Consultant Consultant  get; set; 
    public DateTime LastChangedDate  get; set; 


public record Consultant

    public string ID  get; set; 
    public string FirstName  get; set; 
    public string LastName  get; set; 
    public string FullName 
        get => $"FirstName LastName";
    

错误信息：

>   crit:
> Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
>       Unhandled exception rendering component: Object reference not set to an instance of an object. System.NullReferenceException: Object
> reference not set to an instance of an object.    at
> Test.Client.Pages.Customer.<>c__DisplayClass0_1.<BuildRenderTree>b__21(RenderTreeBuilder
> __builder2)    at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32
> sequence, RenderFragment fragment)    at
> AntDesign.Table`1[[Test.Shared.Models.Customer, Roma.Portal.Shared,
> Version=1.0.0.0, Culture=neutral,
> PublicKeyToken=null]].<BuildRenderTree>b__255_5(RenderTreeBuilder
> __builder6)    at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32
> sequence, RenderFragment fragment)    at
> Microsoft.AspNetCore.Components.CascadingValue`1[[System.Boolean,
> System.Private.CoreLib, Version=5.0.0.0, Culture=neutral,
> PublicKeyToken=7cec85d7bea7798e]].Render(RenderTreeBuilder builder)   
> at
> Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder
> batchBuilder, RenderFragment renderFragment)    at
> Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry
> renderQueueEntry)    at
> Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()
> 

找到的解决方案：

这是一个 AntDesign 问题。这是丢失的：

 <Column  TData="string?" DataIndex ="Consultant.FullName" />

您可以指定要绑定的属性，而不是使用@bind-Field 通过设置数据类型TData和数据索引字符串DataIndex， 可以绑定后代属性。列数据的类型是 同TData的定义。

当绑定属性为ValueType且为Nullable时，TData应为 设置为 Nullable 类型。例如：或“ DataIndex="prop1" />.

当Column使用DataIndex时，Table的OnChange事件参数 QuerModel.SortModel[].FieldName 等于 DataIndex。

有关访问模式的详细信息，请参阅基于路径的属性访问 DataIndex 支持。

【问题讨论】：

“所有数据都填满了” 显然不是真的。我们无法调试我们看不到的代码（或数据）。

用填充小列表的代码替换 list = (await client.GetCustomerAsync()).ToList();。确保它仍然显示错误，然后edit 问题。

我编辑了一个新的私有函数，它填满了列表。它仍然在浏览器中显示相同的错误

我觉得跟 AntDesign 有点关系...

【参考方案1】：

我遇到了类似的问题，但使用的是服务器端 blazor。我最终想到的是创建一个新模型，其中包含要从两个类绑定到表的参数，在您的情况下，客户和顾问这样说；

    
   //from customer 
    public string ID  get; set; 
    public string FirstName  get; set; 
    public string LastName  get; set; 

    //from consultant
    public string ConsFirstName  get; set; 
    public string ConsLastName  get; set; 
    public string ConsFullName 
        get => $"ConsFirstName ConsLastName";
   
```

then use it to map your result to the table by assigning the desired parameters from customer and consultant to the new MappingModel