Question

我有一个来自标准Blazor服务器端模板的非常简单的示例，该示例显示即使在StateHasChanged（）之后，计时器函数也不会更新UI。打电话了。

日志输出显示微调被触发，如果我等待几秒钟并单击IncrementCount按钮，则计数值将跳到计时器已将计数器递增的次数。

很好奇...任何帮助将不胜感激

亲切的问候，斯图尔特

@page "/counter"
@using System.Timers;

@using Microsoft.Extensions.Logging
@inject ILogger<Counter> Logger

<h1>Counter</h1>

<p>Current count: @(currentCount.ToString())</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

@code {
    private int currentCount = 0;

    private void IncrementCount()
    {
        currentCount++;
    }

    public System.Timers.Timer timer;
    protected override async Task OnInitializedAsync()
    {
        timer = new Timer(1000);
        timer.Elapsed += this.OnTimedEvent;
        timer.AutoReset = true;
        timer.Enabled = true;
        timer.Start();
    }

    public void OnTimedEvent(Object source, ElapsedEventArgs e)
    {
        Logger.LogInformation("Timer triggered");
        IncrementCount();
        StateHasChanged();
    }
}

Answer 1

您正在运行Blazor Server App，对吗？在这种情况下，您应该从ComponentBase的InvokeAsync方法中调用StateHasChanged方法，如下所示：

InvokeAsync(() => StateHasChanged());

我猜发生这种情况是因为计时器在与UI线程不同的线程上执行，这需要同步所涉及的线程。在Blazor WebAssembly上，由于所有代码都是在同一UI线程上执行的，因此不太可能发生这种情况。

希望这对您有帮助...

Blazor UI在StateHasChanged调用上未更新

1 个答案: