Blazor 异步获取数据后前台不更新的问题处理

最新推荐文章于 2024-08-06 10:28:00 发布

Teln_小凯

最新推荐文章于 2024-08-06 10:28:00 发布

阅读量694

点赞数

分类专栏： C# Blazor 文章标签： java 前端 javascript c# blazor

本文链接：https://blog.csdn.net/qq873113580/article/details/134185353

版权

C# 同时被 2 个专栏收录

42 篇文章 0 订阅

订阅专栏

Blazor

15 篇文章 1 订阅

订阅专栏

正常官方案例里面，点一下按钮页面能实现数据+1的功能

private int currentCount = 0;
private void IncrementCount()
{
    currentCount++;
}

后面我把currentCount++;放到一个异步方法后发现页面的显示不同步了

private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
                
    await Task.Delay(200);


          
    //这里重新赋值后，页面数据不显示
    currentCount = options.PageItems;


    //....do someth            
    return new QueryData<Foo>()
    {
        Items = items,
        TotalCount = count
    };
}

后面查资料发现，对于async这种异步方法，需要手动调用StateHasChanged()，告诉前台Blazor的状态已经改变，前台才会自动更新值。

非async异步方法，系统默认调用了StateHasChanged()方法。

改成下面的就可以了

private async Task<QueryData<Foo>> OnQueryAsync(QueryPageOptions options)
{
                
    await Task.Delay(200);


          
    //这里重新赋值后，页面数据不显示
    currentCount = options.PageItems;

    //异步方法需要主动调用这个方法，告诉前台Blazor的状态已经改变
    StateHasChanged();


    //....do someth            
    return new QueryData<Foo>()
    {
        Items = items,
        TotalCount = count
    };
}