在异步方法中更改变量后缺少 StateChange

Question

我尝试在加载数据时显示微调器。 微调器工作得很好，只要我没有明确地进行所有调用 asnyc。 但是自从改成async调用后，好像isLoading和emptyResult这两个变量的StateChanges就不会被识别了。 其他一切都按预期运行，在查看几秒钟后显示了我的表格，但我从来没有得到微调器。 我在这里错过了什么？

<EditForm Model="@parameter" OnValidSubmit="@Submit">
 
...
</EditForm>

@if (isLoading && !emptyResult)
{
    <div class="spinner"></div>
}
else if(!isLoading && emptyResult)
{
    <div>
        <span class="text-danger">
            No data for given parameters.
        </span>
    </div>
}
else if (data != null && !isLoading && !emptyResult)
{
    //Table of data
}


@code{
    private MyParameter parameter = new MyParameter();
    private List<CustomObject> data;

    private bool isLoading = false;
    private bool emptyResult = false;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }

    private async Task Submit()
    {
        emptyResult = false;
        isLoading = true;
        await LoadDataAsync();
        isLoading = false;
    }
        
    private async Task LoadDataAsync() 
    {
       data = await service.GetData(parameter);
       if(data is null)
       {
           emptyResult = true;
       }
       else { 
       //Some calculation on data
       }
    }
 }
    

Answer 1

我把你的页面做成了独立的，并添加了更多的显示逻辑。 这是我的版本，我认为它可以按您的意愿工作。

@page "/"

<div class="m-2">
<EditForm Model="@parameter" OnValidSubmit="@Submit">
<div class="bg-info p-2">
    Some edit fields
</div> 
<div class="p-2">
    <button class="btn btn-primary" type="submit">Submit</button>
</div> 
</EditForm>
</div>

@if (isLoading)
{
    <div class="spinner"><h3 class="text-danger">Spinning....</h3></div>
}
else if(emptyResult)
{
    <div>
        <span class="text-danger">
            No data for given parameters.
        </span>
    </div>
}
else if (data != null)
{
    <div>
        <span class="text-white bg-dark p-2">
            Data : @data.Value
        </span>
    </div>
}

else
{
    <div>
        <span class="text-white bg-danger p-2">
            No Data to Display
        </span>
    </div>
}

@code{
    private MyData parameter = new MyData();
    private MyData? data;
    private bool toggle;

    private bool isLoading = false;
    private bool emptyResult = false;

    protected override async Task OnInitializedAsync()
    {
        await base.OnInitializedAsync();
    }

    private async Task Submit()
    {
        emptyResult = false;
        isLoading = true;
        await LoadDataAsync();
        isLoading = false;
        toggle = !toggle;
    }

    private async Task LoadDataAsync() 
    {
        //  emulate an async call
        await Task.Delay(1000);
        data = toggle
            ? data = null
            : data = new MyData {Value = $"updated at {DateTime.Now.ToLongTimeString()}"};

        if(data is null)
            emptyResult = true;
        else 
            emptyResult = false;
    }

    public class MyData
    {
        public string Value { get; set; } = string.Empty;
    }

 }

Answer 2

症状表明await service.GetData(parameter)不是异步的（足够）。 确保您的操作释放线程，在顶部 UI 方法中执行此操作：

private async Task Submit()
{
    emptyResult = false;
    isLoading = true;
    await Task.Delay(1);    // add this
    await LoadDataAsync();
    isLoading = false;
}