Blazor按钮的onclick会再次触发所有生命周期方法

Question

我在我的Blazor应用程序中遇到了一个问题。

在我的按钮触发onclick之后，我调用函数CheckSchedule

我成功地调用了该方法，但我的问题是，我认为我的页面被重新初始化了，因为页面再次调用了我的所有生命周期方法。页面再次运行protected override async Task OnInitializedAsync()。

我能知道为什么会发生这种情况吗？因为它重新设置了我的列表，而这不应该发生。

更新： 大家好，我通过删除HTML表单解决了我的问题。

谢谢

- Karl Christian Gutierrez Abant

---

你已经尝试过 @onclick="() => CheckSchedule()" 了吗？如果不起作用，请尝试使用enets的解决方案，如果仍然有问题，那么我认为你应该休息一下，喝杯水，删除页面并再次添加带有你的代码的页面。 - Abdullah Rana

Answer 1

感谢 @enet 找出了这个问题。

解决方案

从您的截图中可以看出，您没有设置按钮的 type。尝试将 type="button" 添加为按钮的属性，看看是否解决了问题。

OnInitializedAsync 为什么会在单击按钮时调用

当您未指定按钮类型时，默认为 type="submit"。通常这不是问题，但如果一个 type="submit" 的按钮位于 <form> 内部，则会导致发生 http 请求。这将导致页面刷新并重新创建组件。

顺便问一下，为什么您在 init 方法中检查 Branches == null？它可能不同吗。

- Jesse Good

---

我认为这次你搞错了...再想一想什么是预渲染以及OP所描述的内容。在Blazor Server中，默认情况下会调用OnInitializedAsync两次。没错。但是我们现在已经完成了预渲染（或渲染）：用户现在通过单击按钮触发一个方法...这不应该导致重新加载Index页面。我认为问题与以下内容有关：1.按钮元素未包含type属性设置为“button”值，因此它默认为“submit”，结合我的假设（目前为止）。 - enet

按钮元素嵌入在表单元素中，因此，当您单击按钮时，会发生传统的http请求，并且该表单将被提交到无处。由于此POST请求导致应用程序流程超出应用程序空间的边界，因此当它空手返回时，Index页面将重新加载（创建一个新页面）。即使我错了，将问题归因于预渲染也是错误的。 - enet

@enet：那是个好猜测。我认为你可能是对的。我会删除这个答案，你能发一个单独的答案吗？ - Jesse Good

不，不要删除你的答案，只需更改以反映我的猜测。我之前就可以回答它，但出于某种原因我不想回答。 - enet

@enet 我猜也是这样，一些简短的谷歌搜索可能会证实它：默认按钮类型是什么。 - DanielD

@DanielD，是的，但这里还必须有另一个条件：即该按钮嵌入在表单元素中... - enet