如何解决子项中的onclick事件后,Blazor父组件意外重新初始化
所以,我在blazor服务器应用程序中有一个Parent and Child组件。父组件位于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; }
}
...
在父级中,有一个带有按钮的表单,该按钮执行某项操作并构建一个List,然后将此列表作为参数传递给子组件:
...
<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?
我认为这可能是由于我向孩子传递了一个可变参数,如果孩子对它进行了突变,blazor认为应该重新初始化父对象,但是param存在于父对象中,这样就没有意义了。
解决方法
您有一个隐藏的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()是一个异步方法,但是在原始事件处理程序中并未等待它。因此它以“一劳永逸”模式操作,并且在方法完成之前进行了重新渲染。
,我希望您的父母在EditForm
内,并且您正在更改其Model
参数。这将导致其中的所有组件被破坏并重新创建。
我在一个表单中有一个按钮,它带有一个 OnClick 事件,它调用了一个 empty 方法 —— 是的,它什么也没做。单击该按钮会导致整个页面及其所有组件重新初始化,我尝试过的任何方法都无法阻止这种行为。解决方案是简单地去掉表单标签。
这显然是一个奇怪的警告,说明了 Blazor 中表单的处理方式。
建议:完全不要使用表单,除非您的实现明确需要它。