在 Blazor 服务器端应用程序中调用 StateHasChanged() 异步会影响所有打开的浏览器，我该如何阻止它？答案

【问题标题】：calling StateHasChanged() async in Blazor Server-Side application effects all open browsers, how can I stop this?在 Blazor 服务器端应用程序中调用 StateHasChanged() 异步会影响所有打开的浏览器，我该如何阻止它？
【发布时间】：2022-07-01 23:50:01
【问题描述】：

这是我在这里的第一个问题，所以请放轻松。 :) 我也是 Blazor 的新手，但不是 c#。

我正在构建一个 Blazor 服务器端应用程序，用户可以在其中输入一些信息并根据服务器上的一些数据检查它是否有效。

到目前为止，我在调用执行查找并返回要在浏览器上显示的记录的类的函数方面没有任何问题。当我想显示该信息时，我的问题就出现了。

在 c# 代码中，我有一个名为 SdItem 的变量，其中包含从查询返回的记录。

为了在 razor 页面上显示数据，我使用以下几行代码。

@if (SdItem != null)
{
    <div>
        Code: @SdItem.Code<br />
        Desc.: @SdItem.Desc<br />
    </div>
}

当SdItem 获取数据时，它显然不会显示信息，直到我调用StateHasChanged(); 这当然会引发异常，所以我不得不将其更改为 await InvokeAsync(StateHasChanged);

虽然在此更改后，屏幕上显示的信息似乎一切正常，但我遇到了一个新问题，我无法在互联网上的任何地方找到解决方案或解释。

在调试过程中，MS Edge 会自动启动并显示网站。为了测试这个奇怪的问题，我还启动了 Firefox 以指向同一个本地地址。然后我也使用我的智能手机，这就是我开始查询的地方。当我返回结果时，它们不仅会显示在手机上，还会显示在当前显示该网站的所有活动浏览器上。

为什么会发生这种情况，我该如何阻止它。

目前我设法用丑陋的代码阻止了这种情况的发生

try { StateHasChanged(); } catch { }

这会抑制异常，结果只会显示在执行请求的浏览器上。这很难看，我不喜欢使用它。

任何帮助将不胜感激。

作为信息，以防这可能是原因。查询的数据位于作为范围服务添加的类的列表中。但是 T 是剃刀文件代码中的私有变量。

【问题讨论】：

try-catch 误导了原因。你有一些不应该是静态的或单例的。代码太少了，看看能不能发minimal reproducible example
如果代码不够，我深表歉意。一旦我进行了更多故障排除，我将尝试提供更多信息。目前，我将其范围缩小到一个库，用于使用相机link 扫描条形码。当我使用简单的输入框和按钮时，没有问题。

标签： c# html async-await blazor blazor-server-side

【解决方案1】：

"当SdItem 获取数据时，它显然不会显示信息，直到我调用StateHasChanged" 为什么这很明显？我希望 Blazor 在显示的数据发生更改时更新显示。您应该很少需要致电StateHasChanged。这让我想知道还有什么事情发生。

首先想到的是SdItem 应该是一个属性...

public Whatever SdItem { get; set; }

...并且不是私有字段...

private Whatever SdItem;

我不确定是否需要公开，但在使用属性时，Blazor（几乎）总是更新显示。使用私有字段时，如果经常不使用。

"这当然会引发异常" 再说一次，我不明白为什么你说“当然。”这一切都取决于哪里你打电话给StateHasChanged。是的，如果您在 async 块内，则需要调用 InvokeAsync，但如果您不在，则不需要这样做。

更多代码会很有用，因为很难从您提供的小 sn-p 中确切知道您在做什么，但请尝试使用属性（如果您还没有），看看是否可以避免需要拨打StateHasChanged。

如果没有，请用更多信息更新您的问题。

【讨论】：