Blazor 嵌套子项更新子项，但父项不会立即更新

Question

父级：

<TourOfficesSettings @ref="SettingsModal" @bind-Informations="informations"></TourOfficesSettings>
<button class="btn btn-outline-primary" type="button" @onclick="() => SettingsModal.Modal.Open()"><span>Settings</span></button>
@code {
public List<TouOffInformationModel> informations { get; set; }
private TourOfficesSettings SettingsModal { get; set; }
protected override async Task OnInitializedAsync()
{
try
{
var result = await Http.GetFromJsonAsync<List<TouOffInformationModel>>("api/TourOffices");
informations = result.ToList();
filteredTouOffDatas = touOffDatas;
}
catch (AccessTokenNotAvailableException exception)
{
exception.Redirect();
}
}
}

儿童：

<Modal @ref="Modal" ModalSize="xl" ModalId="settings">
<TouOffInfoForm @ref="informationModal" @bind-Informations="Informations"></TouOffInfoForm>
</Modal>
@code {
[Parameter]
public List<TouOffInformationModel> Informations { get; set; }
[Parameter]
public EventCallback<List<TouOffInformationModel>> InformationsChanged { get; set; }
public Modal Modal { get; set; }
private TouOffInfoForm informationModal { get; set; }
}

嵌套子级：

<button class="btn btn-outline-danger" @onclick="Create()">Create</button>
@code {   
[Parameter]
public List<TouOffInformationModel> Informations { get; set; }
[Parameter]
public EventCallback<List<TouOffInformationModel>> InformationsChanged { get; set; }
public async Task Create() {
var model = new TouOffInformationModel(....);
Informations.Add(model);
await InformationsChanged.InvokeAsync(Informations);     
}
}

我的问题是：只有"嵌套的子"；更改"；Information"；，在改变之后；"孩子"；但在"；"父"；只有当我打开"；"孩子"；再次关闭。

你们能帮我设置"；"孩子"；所以我可以在那里做"；Information Changed.InvokeAsync(("一旦信息更改？

Answer 1

这似乎是一个"值对参考值"；问题您正在更改列表项本身中的基础数据，但请记住，列表是内存中的引用项，您必须将其视为引用项。StateHasChanged有一个它调用的组件和任何子组件的上下文，这意味着Blazor在一个组件的范围内将按预期运行，但您也必须将更改通知更高级别的组件。

从我的角度来看，简单的修复方法(也是一种稍微清理代码的方法(是将列表及其所有状态管理逻辑保留在同一个组件中。这意味着你的最高水平；父"；组件应该具有Create(TouOffInformationModel)方法(注意方法签名！(，因为这是定义列表Informations的地方。然后，您可以将Create(TouOffInformationModel)方法作为事件回调传递到组件树下，当子组件调用它时，它实际上发生在树的顶部。如果仍然存在数据显示问题，您可以在新的Create方法中包含StateHasChanged()，它应该都能工作。这将使你的"；父"；组件代码块看起来像这样：

@code {
public List<TouOffInformationModel> informations { get; set; }
private TourOfficesSettings SettingsModal { get; set; }
public Task Create(TouOffInformationModel model) {
informations.Add(model);
// This may not be needed, but try it both ways
StateHasChanged();
}
protected override async Task OnInitializedAsync()
{
try
{
var result = await Http.GetFromJsonAsync<List<TouOffInformationModel>>("api/TourOffices");
informations = result.ToList();
filteredTouOffDatas = touOffDatas;
}
catch (AccessTokenNotAvailableException exception)
{
exception.Redirect();
}
}
}

然后将Create方法传递到需要的地方。

第二个更健壮的选项是实现注入的服务和/或构建一个数据模型，该模型将处理自己的状态管理并根据需要进行通知，但这比您在这里所要求的范围更大、更复杂。尽管如此，这样做会获得很大的脱钩，如果你感兴趣，我建议你研究Blazor的国家管理选项。