blazor 中的 OnInitializedAsync()

Question

我在我的代码中使用了 OnInitializedAsync()。在那个钩子中，我正在获取数据。在标记中，我检查了数据是否为空。但是我发现检查的数据是在 onInitalizedAsync() 触发之前执行的。同时，也在获取数据后，执行数据校验。

我已经检查了 blazor 文档，但一直在努力找出它最初触发的原因。

<Component1>
  @if (Data != null)
      {
        @foreach (var item in Data) {
             <Component2>
        }
       }
</Componet1>

@code{
  protected override async Task OnInitializedAsync() {
       Data = //data from dataBase
  }
}

我只需要在获取数据后执行检查的数据。谁能指导我解决这个问题？

提前致谢，

凯萨万

Answer 1

必须首先进行数据检查，因为必须在OnInitializedAsync方法之前渲染某些内容。因此，如果OnInitializedAsync加载数据需要很长时间，用户已经看到了一些东西，而不仅仅是一个空白页面。

为什么要在获取数据后才进行数据检查？

作为解决方法，您可以创建一个局部变量bool dataIsLoaded = false;，并且只有在加载数据后OnInitializedAsync才能将其设置为 true。然后在数据检查中执行：@if (dataIsLoaded && Data != null)

Answer 2

我建议不要检查空数据。相反，只需渲染 Data 变量并在 OnInitializedAsync() 内加载 Data 后调用 StateHasChanged() 即可。关键是让框架知道正在使用变量 Data，因此当调用 StateHasChanged() 时，它将适当地呈现 Data。

<h3> @Data </h3>

@code {
    private string Data = "";

    protected override async Task OnInitializedAsync()
    {
        Data = await Service.GetDataAsync();
        StateHasChanged();
    }
}

Answer 3

我假设 Data 是列表或数组类型。我通常做的是在 OnInitialized 中初始化列表或数组，并在 OnInitializedAsync 中进行调用。所以不需要检查。

protected override void OnInitialized()
{
   Data = new List<Type>()
}