c# - Blazor 父组件在子组件发生 onclick 事件后意外得到重新初始化

Question

因此，我在 Blazor 服务器应用程序中有一个父子组件。父组件在 index.razor 页面中它不需要参数。子组件有一个 List 作为参数:

...
@if (People == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <li>

    @foreach (var p in People)
    {
        <ul>@p.LastName, @p.FirstName</ul>
    }
    </li>
}

@code {
    [Parameter]
    public IReadOnlyList<PersonModel> People { get; set; }
}
...

在父组件中，有一个带有按钮的表单，该按钮执行某些操作并构建一个列表，然后将此列表作为参数传递给子组件:

...
<button class="btn btn-outline-primary" type="submit" @onclick="(() => SearchPeople(firstNameInput, lastNameInput))">Search</button>

...
        @if(peopleResults != null)
        {
            <PeopleList People="peopleResults"></PeopleList>
        }

@code {

    private string lastNameInput = string.Empty;
    private string firstNameInput = string.Empty;

    private List<PersonModel> peopleResults {
        get;
        set; }

    private async Task SearchPeople(string lastName, string firstName)
    {
        peopleResults = await _personData.SearchPeopleByName(firstName, lastName);
    }

}

SearchPeople 方法工作正常并返回正确的数据。我已经调试了程序，看起来它确实开始使用 List 正确构建子组件。事实上，在某些情况下，我已经看到它在页面上弹出了一秒钟。然而，在那之后，父组件被完全重新初始化并且所有属性都被设置回默认值。我放了一个

protected async override Task OnInitializedAsync() {
}

父组件中的方法调用和其中的一个断点，果然它在 onclick 事件之后的某个点被调用。所以每次单击按钮时，父组件肯定会被删除并重新初始化。

所以我的问题是，为什么blazor会重新初始化父组件？为此，我遵循了这篇文章的建议，但我不确定我在做什么不同:How can I pass a List<string> as a parameter to a child component in blazor?

我想这可能是因为我将一个可变参数传递给 child ，如果 child 改变它，blazor 认为 parent 应该重新初始化，但参数存在于 parent 中，这样就没有意义了。

Answer 1

您有一个隐藏的async void，因此重新渲染不同步。

改变这一行

<button class="btn btn-outline-primary" type="submit" 
  @onclick="(() => SearchPeople(firstNameInput, lastNameInput))">Search</button>

到:

<button class="btn btn-outline-primary" type="submit" 
  @onclick="(async () => await SearchPeople(firstNameInput, lastNameInput))">Search</button>

你可能希望 type="button" 在那里。不是主要问题。

---

当您处理@onclick 之类的用户事件时，Blazor 将在处理程序之后执行隐式 StateHasChanged()，从而导致页面重新呈现。

SearchPeople() 是一种异步方法，但在原始事件处理程序中并未等待它。因此它以即发即弃模式运行，并且在方法完成之前重新渲染。