子项中的onclick事件后,Blazor父组件意外重新初始化

如何解决子项中的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 中表单的处理方式。

建议:完全不要使用表单,除非您的实现明确需要它。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?