页面重新加载后 Blazor InvokeAsync 不再工作

Question

我有一个 Blazor 页面（服务器端），它使用对 Azure 服务总线的异步调用来获取一些数据并将结果打印到页面。一开始一切正常。但是，如果用户重新加载页面，则页面不会按预期重新呈现。

断点调试显示模型更新，页面重载后调用StateHasChanged；它只是没有做任何事情。我的印象是InvokeAsync 应该始终使用 UI 线程，但在页面重新加载后似乎并非如此。

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  // On page load. Service bus watcher is hooked up here
  await serviceBusHandler.WatchQueue("servicebus-queue", MessageHandler, async _ => await Task.CompletedTask);
}

// "request" method; calls a Service Bus method get a new value for our model
private async Task SaveAndGetAmount()
{
  IsLoading = true;

  // creation of Service Bus message omitted
  // post to "servicebus-queue" with message here
}

private async Task MessageHandler(ProcessSessionMessageEventArgs args)
{
  var result = ... // parsing of "args" message omitted

  await args.CompleteMessageAsync(args.Message); // mark Azure Functions message received
  
  await InvokeAsync(() =>
  {
    IsLoading = false;
    Model.Amount = result.Amount; // update page model here
    StateHasChanged(); // indicate to UI that the model has changed, and the page must re-render
  });

此外，我在Model.Amount 属性中添加了一个手表，它表现出一些奇怪的行为。如果在初始页面加载时设置为 23，则手表将始终在 SaveAndGetAmount 方法中的断点处显示 23，就好像它永远不会被 MessageHandler 方法更新一样。

Answer 1

WatchQueue 在每个 OnAfterRenderAsync 上都会被调用；我们忽略 firstRender

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  // On page load. Service bus watcher is hooked up here
  await serviceBusHandler.WatchQueue("servicebus-queue", MessageHandler, async _ => await Task.CompletedTask);
}

这里只是一个猜测，但这意味着每个 (Re)Render 都会添加一个消息处理程序。这是错误的，但只要您在页面的同一实例上，就会被忽视。

重新加载后，您的消息仍会在旧（已失效）页面上处理。这就是我认为您在调试器中看到的情况。

如果我是对的，解决方案有两个：

@implements IDisposable

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  if (firstRender)  // only once per page
  {
    // On page load. Service bus watcher is hooked up here
    await serviceBusHandler.WatchQueue("servicebus-queue", MessageHandler, async _ => await Task.CompletedTask);
  }
}

public void Dispose()
{
  // somehow undo the WatchQueue 
}

如果你不能解开那个处理程序，那么它就在错误的地方。