尝试从 API 获取数据时出错 - Blazor [重复]

Question

我在 ASP.NET Core 中构建了一个 API，代码如下所示：

public async Task<IEnumerable<Applicant>> GetApplicants()
{
    return await appDbContext.Applicants.ToListAsync();
}

[HttpGet]
public async Task<ActionResult> GetApplicants()
{
    try
    {
        return Ok(await applicantRepository.GetApplicants());
    }
    catch (Exception)
    {
        return StatusCode(StatusCodes.Status500InternalServerError, "Error retreiving data from the database");
    }
}

这里我们看看它在浏览器中的样子（我猜这很好）：

Blazor（服务器）代码：

public interface IApplicantService
{
    Task<IEnumerable<Applicant>> GetApplicants();
}

public class ApplicantService : IApplicantService
{
    private readonly HttpClient httpClient;
    public ApplicantService(HttpClient httpClient)
    {
        this.httpClient = httpClient;
    }
    public async Task<IEnumerable<Applicant>> GetApplicants()
    {
        return await httpClient.GetJsonAsync<Applicant[]>("api/applicants");
    }
}

public class ApplicantList : ComponentBase
{
    [Inject]
    public IApplicantService ApplicantService { get; set; }
    public IEnumerable<Applicant> Applicants { get; set; }

    protected override async Task OnInitializedAsync()
    {        
        Applicants = (await ApplicantService.GetApplicants()).ToList();
    }
}

还有页面：

@page "/"
@inherits ApplicantList
<h1>Applicants</h1>

<div class="card-deck">
    @foreach (var applicant in Applicants)
    {
        <div class="card m-3" style="min-width: 18rem; max-width:30.5%;">
            <div class="card-header">
                <h3>@applicant.Name</h3>
            </div>
            <div class="card-footer text-center">
                <a href="#" class="btn btn-primary m-1">View</a>

                <a href="#" class="btn btn-primary m-1">Edit</a>

                <a href="#" class="btn btn-danger m-1">Delete</a>
            </div>
        </div>
    }
</div>

我面临空引用错误。在调试时，我看到 Applicants 为空

Answer 1

解决方案很简单：用这样的 if 语句包装 foreach 循环：

@if( Applicants != null)
   {
       @foreach (var applicant in Applicants)
       {
        //...
       }
   }

说明：在生命周期OnInitializedAsync方法中调用ApplicantService.GetApplicants()方法时，会出现以下情况：

ApplicantService.GetApplicants() 被调用并等待，执行控制权交给调用代码，直到 GetApplicants() 完成...Blazor 开始呈现组件的视图部分，但可惜的是，申请人变量尚未填充数据。它包含空值，因此异常。

注意：当 GetApplicants() 方法完成时，会再次进行重新渲染，这次的申请者变量包含检索到的数据。

注意：不要使用 GetJsonAsync 方法。改用新的方法和对象集：Install-Package System.Net.Http.Json -Version 5.0.0