Blazor组件在StateHasChanged()之后未更新
Blazor组件在StateHasChanged()之后未更新
提问于 2020-10-09 01:55:00
我有一个Blazor服务器端页面，它包含以下内容：
@foreach (var s in OSTs)
{
<div class="alert" style="height: 30px; background:@s.Color; color: @s.TextColor;">
<div class="form-row">
<div class="col-sm-3"><strong>@s.Stage</strong><br />@s.Description</div>
<OpportunitiesStageDiv MyEditOst="@s" UpdateIt="AddOrEditStage"></OpportunitiesStageDiv>
<div class="badge badge-primary" @onclick="() => MoveItUp(s)" style="cursor: pointer; width: 6rem;"><i class=" oi oi-arrow-top"></i> Move Up</div>
<div class="badge badge-primary" @onclick="() => MoveItDown(s)" style="cursor: pointer; width: 6rem;"><i class="oi oi-arrow-bottom"></i> Move Down</div>
<div class="badge badge-primary">@s.Id - @s.StageOrder</div>
</div>
</div>
}组件OpportunitiesStagesDiv如下：
<div class="badge badge-primary" @onclick="() => EditStage(MyEditOst.Id)" style="cursor: pointer; width: 6rem;">Edit Stage</div>
<Modal @ref="@EditModal">
<Title>Edit Opportunity Stage</Title>
<Body>
<EditOpportunityStage EditOSt="@MyEditOst" Complete="AddOrEditStage"></EditOpportunityStage>
</Body>
<Footer>
<button type="button" class="btn btn-secondary" data-dismiss="modal" @onclick="() => EditModal.Close()">Close</button>
</Footer>
</Modal>
@code {
[Parameter]
public OpportunityStagesTemplate MyEditOst { get; set; }
private Modal EditModal = new Modal();
[Parameter]
public EventCallback<int> UpdateIt { get; set; }
protected override void OnInitialized()
{
base.OnInitialized();
}
private void EditStage(int SId)
{
EditModal.Open();
}
private void AddOrEditStage(int Completed)
{
if (Completed == 99)
{
}
EditModal.Close();
}
}MoveItUp(s)和MoveItDown(s)是根据数据库查询中的order参数向上或向下移动foreach循环中的主要div元素的函数。这个可以完美地工作。奇怪的是，一旦DIV元素向上或向下移动，组件中的编辑功能@onclick="() => EditStage(MyEditOst.Id)"就会像前一个元素一样反映出来。
对于参考工作的MoveItUp和MoveItDown函数：
private void MoveItUp(OpportunityStagesTemplate MyEditOst)
{
if (MyEditOst.StageOrder > 1)
{
OpportunitiesStagesTemplateGateway OSTGw = new OpportunitiesStagesTemplateGateway();
OpportunityStagesTemplate PreviousOst = OSTGw.GetStageByOIdAndStageOrder(MyEditOst.OId, MyEditOst.StageOrder - 1);
PreviousOst.StageOrder = MyEditOst.StageOrder;
MyEditOst.StageOrder -= 1;
OSTGw.UpdateOpportunityStage(PreviousOst);
OSTGw.UpdateOpportunityStage(MyEditOst);
ExecuteTheGetStages(LastId);
StateHasChanged();
}
}
private void MoveItDown(OpportunityStagesTemplate MyEditOst)
{
OpportunitiesStagesTemplateGateway OSTGw = new OpportunitiesStagesTemplateGateway();
int ct = OSTGw.GetCountByOId(MyEditOst.OId);
if (ct > MyEditOst.StageOrder)
{
OpportunityStagesTemplate NextOst = OSTGw.GetStageByOIdAndStageOrder(MyEditOst.OId, MyEditOst.StageOrder + 1);
NextOst.StageOrder = MyEditOst.StageOrder;
MyEditOst.StageOrder += 1;
OSTGw.UpdateOpportunityStage(NextOst);
OSTGw.UpdateOpportunityStage(MyEditOst);
ExecuteTheGetStages(LastId);
StateHasChanged();
}
}示例我有一个列表，如下所示：
<div 1 edit moveup movedown>
<div 2 edit moveup movedown>
<div 3 edit moveup movedown>当我向上移动一个分区时
<div 1 edit moveup movedown>
<div 3 edit moveup movedown>
<div 2 edit moveup movedown>然后单击div 3的第2行上的编辑，它将显示编辑，就好像是div 2一样。似乎组件仍然保留在渲染UI上的位置，就好像DIV 2在第二行，DIV 3仍然在第三行，尽管move up和move down功能已经更新了数据库，并且正确地更新了UI，以便在移动列表时按顺序显示列表。有什么建议吗？
下面是渲染的页面示例：
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-09 03:00:28
在仔细阅读Microsoft LifeCycle文档之后，我找到了一个简单的解决方案。我发现如果使用：
protected override void OnParametersSet()
{
...
}我的模式上的编辑表单显示了正确的信息。OnParameterSet允许我更新任何本地组件变量，即使在OnInitialized()上提供它们的原始参数已经设置。
谢谢，我希望这个答案对大家都有帮助。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64268135
复制相关文章
相似问题
腾讯云开发者
