如何确保Blazor渲染器识别集合更改 [英] How to ensure the Blazor renderer recognises a collection change

问题描述

作为内容管理页面的一部分，我有一个图像库编辑器，它显示图像列表并允许用户添加和删除图像。这是Blazor服务器端。

有一个InputFile按钮连接到ImageUpload函数，该函数在更新后重新获取图像列表。该列表绑定到List<ImageItemViewModel> ImageList，只是div中的@foreach。ImageUpload函数完成后，它向服务器API请求当前图像列表并执行以下操作：

1. ImageList.Clear()
2. ...通过API获取图片并进行一些处理，生成一些视图模型...
3. ImageList.AddRange(...image view models...)

现在，发生的是步骤1以可视方式清除列表--您得到一个空列表。(事后看来，我意识到这是我无论如何都不想要的东西) 但第3步不会导致用户界面更新。

为了解决这个问题，我定义了一个局部变量tempList，该变量最初为空，在步骤2中填充该变量，然后将ImageList设置为tempList。这就是我一开始就应该做的事情，因为我现在看到，如果AddRange正常工作，Clear()方法会导致短暂的闪烁。

但是，如果我想要这种行为，什么是正确的模式，或者Blazor服务器端有什么机制可以在集合或列表发生更改时更新UI？我们应该在这里使用可观察对象吗，或者有像NoticeUpdate(Ref Var)之类的命令可用吗？

Blazor

我只是猜测，您可能正在使用返回空的推荐答案事件处理程序方法(或者有一个子方法执行类似的操作)。您的图像处理代码几乎肯定会运行异步代码。在第一次交出时，控制权就交还了。在没有要等待的任务的情况下，它运行StateHasChanged直到完成。此时列表已清除。

更新

从注释中可以看出，代码路径中有一个不需要等待的异步方法。结果是一样的。处理程序可能会返回一个任务，但如果代码路径中有一个未等待的异步任务，则在第一次屈服时，父代码块将运行到完成，Tasks完成，事件处理程序也完成。

Blazor事件处理程序代码如下：

var task = InvokeAsync(EventMethod);
StateHasChanged();
if (!task.IsCompleted)
{
    await task;
    StateHasChanged();
}

如果EventMethod只包含同步代码，则它运行到完成，并且StateHasChanged被调用一次。如果EventMethod返回一个正在运行的任务，则它在第一次屈服时调用StateHasChanged，然后在完成时调用。

这篇关于如何确保Blazor渲染器识别集合更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！