Blazor StateHasChanged() 未更新子组件
Blazor StateHasChanged() Not Updated Child Components
我有一个包含项目目录的服务。这些项目取决于服务的活跃公司。
// Tell Service to refresh in context of Company 1
await Service.SetActiveCompany(1);
// Get Catalog (which will be in the context of Company 1)
Catalog catalog = Service.Catalog;
// Tell Service to refresh in context of Company 2
await Service.SetActiveCompany(2);
// Get Catalog (which will be in the context of Company 2)
catalog = Service.Catalog;
以上独立运行良好。目录用相应公司的项目刷新。
在我的应用程序中,我有一个布局,其中包含 select 活跃公司的下拉菜单。当这发生变化时,我调用:
await Service.SetActiveCompany(dropdown.selectedCompanyId);
在服务中,我刷新目录并引发事件
public class CompanyChangedEventArgs : EventArgs { }
public class Service
{
public event EventHandle<CompanyChangedEventArgs> CompanyChanged;
protected void OnCompanyChanged()
=> CompanyChanged?.Invoke(this, new CompanyChangedEventArgs());
public Catalog Catalog { get; private set; }
public async Task SetActiveCompany(int companyId)
{
Catalog = await API.GetCatalogForCompany(companyId);
OnCompanyChanged();
}
}
在父组件中(使用上面的布局)我捕获了事件
<CatalogSectionA />
<CatalogSectionB />
@code {
protected override void OnInitialized()
{
Service.CompanyChanged += HandleCompanyChanged;
base.OnInitialized();
}
HandleCompanyChanged(object sender, EventArgs e) => StateHasChanged();
}
我希望这会导致 CatalogSectionA 和 CatalogSectionB 组件刷新。
目录部分 A
<div>
@foreach (Item i in Catalog.SectionA.Items)
{
<div>@i.Name</div>
}
</div>
@code {
Catalog Catalog => Service.Catalog;
}
目录部分 B
<div>
@foreach (Item i in Catalog.SectionB.Items)
{
<div>@i.Name</div>
}
</div>
@code {
Catalog Catalog => Service.Catalog;
}
我曾期望在父组件中调用 StateHasChanged() 以强制重新呈现 CatalogSectionA 和 CatalogSectionB,但事实并非如此。
我可以在每个方法上放置一个 Refresh 方法,并在处理公司变更事件时从父级调用这些方法,但我认为这对于 Blazor 来说是不必要的,StateHasChanged() 可以解决问题吗?
将 'redundant' 级联参数放在它起作用的子组件上。
根本没有传递任何参数,因为状态(参数)是在服务中管理的,我期待 StateHasChanged() 提示子组件重新呈现并返回服务。
所以,我的结论是,如果我在父组件上调用 StateHasChanged(),那么只有当 Blazor 在父组件中检测到 'dependency' 发生变化时,子组件才会重新呈现组件。
如果没有依赖关系(即没有参数或级联参数),那么 Blazor 似乎假定当父组件中的状态发生变化时子组件中不需要任何更改。
我有一个包含项目目录的服务。这些项目取决于服务的活跃公司。
// Tell Service to refresh in context of Company 1
await Service.SetActiveCompany(1);
// Get Catalog (which will be in the context of Company 1)
Catalog catalog = Service.Catalog;
// Tell Service to refresh in context of Company 2
await Service.SetActiveCompany(2);
// Get Catalog (which will be in the context of Company 2)
catalog = Service.Catalog;
以上独立运行良好。目录用相应公司的项目刷新。
在我的应用程序中,我有一个布局,其中包含 select 活跃公司的下拉菜单。当这发生变化时,我调用:
await Service.SetActiveCompany(dropdown.selectedCompanyId);
在服务中,我刷新目录并引发事件
public class CompanyChangedEventArgs : EventArgs { }
public class Service
{
public event EventHandle<CompanyChangedEventArgs> CompanyChanged;
protected void OnCompanyChanged()
=> CompanyChanged?.Invoke(this, new CompanyChangedEventArgs());
public Catalog Catalog { get; private set; }
public async Task SetActiveCompany(int companyId)
{
Catalog = await API.GetCatalogForCompany(companyId);
OnCompanyChanged();
}
}
在父组件中(使用上面的布局)我捕获了事件
<CatalogSectionA />
<CatalogSectionB />
@code {
protected override void OnInitialized()
{
Service.CompanyChanged += HandleCompanyChanged;
base.OnInitialized();
}
HandleCompanyChanged(object sender, EventArgs e) => StateHasChanged();
}
我希望这会导致 CatalogSectionA 和 CatalogSectionB 组件刷新。
目录部分 A
<div>
@foreach (Item i in Catalog.SectionA.Items)
{
<div>@i.Name</div>
}
</div>
@code {
Catalog Catalog => Service.Catalog;
}
目录部分 B
<div>
@foreach (Item i in Catalog.SectionB.Items)
{
<div>@i.Name</div>
}
</div>
@code {
Catalog Catalog => Service.Catalog;
}
我曾期望在父组件中调用 StateHasChanged() 以强制重新呈现 CatalogSectionA 和 CatalogSectionB,但事实并非如此。
我可以在每个方法上放置一个 Refresh 方法,并在处理公司变更事件时从父级调用这些方法,但我认为这对于 Blazor 来说是不必要的,StateHasChanged() 可以解决问题吗?
将 'redundant' 级联参数放在它起作用的子组件上。
根本没有传递任何参数,因为状态(参数)是在服务中管理的,我期待 StateHasChanged() 提示子组件重新呈现并返回服务。
所以,我的结论是,如果我在父组件上调用 StateHasChanged(),那么只有当 Blazor 在父组件中检测到 'dependency' 发生变化时,子组件才会重新呈现组件。
如果没有依赖关系(即没有参数或级联参数),那么 Blazor 似乎假定当父组件中的状态发生变化时子组件中不需要任何更改。