Blazor 服务器端 - 子函数中更改的值未更新 UI答案

【问题标题】：Blazor Server Side - Value changed in Child function is not updating UIBlazor 服务器端 - 子函数中更改的值未更新 UI
【发布时间】：2020-07-17 21:45:25
【问题描述】：

所以我在这里做的是，我的子组件（RMSBaseComponent.razor）中有一个进度条，它被条件变量“IsLoading”包围

<div style="padding:20px">

@* Page Title *@
<h3>@PageTitle</h3>
<MatDivider></MatDivider>

@* Loader *@
@if (IsLoading)
{
    <MatProgressBar Indeterminate="true"></MatProgressBar>
}
</div>

我在 Parent(AddNewCity.razor) 中将这个子设置为

<RMSBaseComponent PageTitle="Add New City" @ref="BaseComponent">

</RMSBaseComponent>

在这里，我在“BaseComponent”变量中获取子项的引用，但是当我从父组件类 (AddNewCity.cs) 更改“IsLoading”的值时，它不会更新 UI，也不会显示“MatProgressBar”UI。我正在改变价值如下

public partial class AddNewCity
{
    private RMSBaseComponent BaseComponent { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);

        Thread.Sleep(3000);
        BaseComponent.IsLoading = true;
    }
}

如有任何帮助，将不胜感激。

谢谢

【问题讨论】：

stackoverflow.com/questions/56604886/…

标签： blazor .net-core-3.1

【解决方案1】：

你应该在Thread.Sleep()之后调用StateHasChanged()

public partial class AddNewCity
    {
        private RMSBaseComponent BaseComponent { get; set; }

        protected override void OnAfterRender(bool firstRender)
        {
            base.OnAfterRender(firstRender);

            Thread.Sleep(3000);
            BaseComponent.IsLoading = true;
            StateHasChanged();
        }
    }

【讨论】：

我还建议您考虑将诸如 Parameter 之类的引用传递给子组件 - 如果子组件需要改变其父组件的状态，甚至是一些双向绑定或至少一个事件可能是有序的。就个人而言，我更喜欢从子组件中引发事件，以便他们的父母可以决定如何处理（例如，切换加载标志或获取其他数据）。
StateHasChanged();救了我的命。谢谢。