我如何知道何时需要在 Blazor 中调用 StateHasChanged()？答案

【问题标题】：How do I know when I need to call StateHasChanged() in Blazor?我如何知道何时需要在 Blazor 中调用 StateHasChanged()？
【发布时间】：2020-07-13 17:37:37
【问题描述】：

我如何知道何时必须在 Blazor 中调用 StateHasChanged()？

在典型情况下，假设我正在加载数据，并且我希望在加载时禁用“加载”按钮。所以也许我有以下几点。我看到的行为是，除非我在第 17 行调用base.StateHasChanged()，否则该按钮将在初始加载期间显示为启用状态；但是，在那之后，如果我单击“加载”，该按钮将在加载时显示为禁用，然后按预期启用。那么为什么在来自 OnInitializedAsync 的调用中这样的工作不起作用？是否有其他方法可以让我省略 StateHasChanged()？

@inject HttpClient Http
<div class="my-component">
    <button disabled="@(LoadingTask?.IsCompleted == false)" @onclick="LoadData">Load</button>
    ...
</div>

@code {
  protected override async Task OnInitializedAsync() => await LoadData();

  private Task<Thing[]>? LoadingTask { get; set; }
  private Thing[] Data { get; set; } = new Thing[0];

  private async Task LoadData()
  {
    LoadingTask = Http.GetJsonAsync<Thing[]>(url);

    // Line 17: I shouldn't need to call base.StateHasChanged() here, right?

    funds = await LoadingTask;
    HasLoaded = true;
  }

}

【问题讨论】：

这能回答你的问题吗？ When I should call StateHasChanged and when Blazor automatically intercepts that something is changed?
不，我仍然不太明白为什么 await 不能或不应该允许 UI 重新渲染——除非答案只是“可以但不能”。

标签： blazor blazor-client-side

【解决方案1】：

当你想更新智利内容的状态时，你应该在它的父组件中调用 StateHasChanged()。

【讨论】：

【解决方案2】：

似乎 OnInitializedAsync 不允许组件在等待时重新呈现，这与用户启动的事件（如 OnClick）不同。因此，似乎有必要在 OnInitializedAsync 中调用 StateHasChanged，除非 Blazor 在何时检查未来版本中的更改方面变得更加复杂。

【讨论】：