调用方法后 Blazor 页面不更新

Question

我已经构建了一个 Web Assembly blazor 项目。

在其 blazor 组件之一中，有一个用于提交新数据的表单。

这种形式，通过 Web api 将数据 POST 到服务器以保存在数据库中。

<EditForm Model="@person">
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">Id : </label>
        <InputNumber class="form-control col-3" @bind-Value="person.Id" placeholder="id" />
    </div>
    <br />
    <div class="col-12 row">
        <label class="col-2 font-weight-bold">Name : </label>
        <InputText class="form-control col-3" @bind-Value="person.Name" placeholder="name" />
    </div>

     <input type="submit" class="form-control  btn btn-primary text-center" @onclick="@AddPerson" value="Add" />
</EditForm>

背后的 C# 代码@AddPerson是这样的：

@code 
{

    public List<Person> people;
    public Person person = new Person();

    private async void AddPerson()
    {
        HttpResponseMessage httpResponse = await Http.PostAsJsonAsync<Person>("https://apisite.ir/api/people", person);
        people = await Http.GetFromJsonAsync<List<Person>>("https://apisite.ir/api/people");
    }

}

人员列表显示在 foreach 中的这样一个表中，如下所示：

<table class="table">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @foreach (Person p in people)
        {
            <tr>
                <td>@p.Id</td>
                <td>@p.Name</td>
            </tr>
        }
    </tbody>
</table>

问题是，当我单击“添加”按钮时，两个 api 调用都会发生，但 UI 中没有任何变化。

应该显示人员列表的表格不会更新。

我应该怎么办 ？

Answer 1

我对此进行了搜索，每个地方都说StateHasChanged();在调用我的 API 作为答案后添加。

这个问题是误导性的，但我只是通过将void 更改为 Task 来解决它

private async Task AddPerson()
{
    HttpResponseMessage httpResponse = await Http.PostAsJsonAsync<Person>("https://apisite.ir/api/people", person);
    people = await Http.GetFromJsonAsync<List<Person>>("https://apisite.ir/api/people");
}

我不知道为什么会发生这种情况，因为我不擅长编写异步/等待代码，而且我偶然发现了这一点！

StateHasChanged();我在这里发布此内容是为了帮助其他遇到同样情况的人摆脱困境。