Blazor组件中记录更新无法持久化的问题求助

问题描述 #

在Blazor组件中实现现有记录编辑功能，提交表单调用更新方法后，修改内容被覆盖。排查确认更新操作后有方法立即从数据库重新加载原始数据，导致旧值恢复，提交的变更未生效。

修复方案与最佳实践 #

1. 严格控制数据加载时机 #

避免组件生命周期方法重复触发数据加载，仅在必要时获取原始数据：

@code {
    [Parameter]
    public int Id { get; set; }
    public ContentCategory ContentCategory { get; set; } 
    private EditContext editContext;

    protected override async Task OnInitializedAsync()
    {
        // 仅在Id有效且未加载数据时获取
        if (Id > 0)
        {
            ContentCategory = await _contentCategoryRepository.GetByIdAsync(Id);
        }
        else
        {
            ContentCategory = new ContentCategory();
        }
        editContext = new EditContext(ContentCategory);
    }

    // 处理参数变更场景，防止Id变化时重复加载旧数据
    protected override async Task OnParametersSetAsync()
    {
        if (Id > 0 && (ContentCategory == null || ContentCategory.Id != Id))
        {
            ContentCategory = await _contentCategoryRepository.GetByIdAsync(Id);
            editContext = new EditContext(ContentCategory);
        }
    }

    private async Task ContentCategoryUpSert()
    {
        if (ContentCategory.Id == 0)
        {
            await _contentCategoryRepository.CreateAsync(ContentCategory);
        }
        else
        {
            await _contentCategoryRepository.UpdateAsync(ContentCategory);
        }
        // 强制重载列表页，确保获取最新数据
        _navigationManager.NavigateTo("contentcategories", forceLoad: true);
    }
}

2. 优化表单绑定逻辑 #

确保EditForm绑定到最新数据实例，避免绑定到过时对象：

<EditForm class="mt-4" Model="ContentCategory" FormName="ContentCategoryAddEdit" OnValidSubmit="ContentCategoryUpSert">
    <DataAnnotationsValidator />         
    <div class="d-flex align-items-center mb-3">
        <label for="Name" class="form-label me-3 mb-0" style="width: 150px;">分类名称</label>
        <InputText @bind-Value="ContentCategory.Name" class="form-control" id="Name" placeholder="输入分类名称" />
    </div>
    <div class="row mt-3">
        <div class="col-6 col-md-3">
            <button type="submit" class="btn btn-primary form-control"><i class="bi bi-floppy2-fill"></i>保存</button>
        </div>
        <div class="col-6 col-md-3">
            <a href="contentcategories" class="btn btn-secondary form-control"><i class="bi bi-arrow-bar-left"></i>返回列表</a>
        </div>
    </div>
</EditForm>

3. 禁用不必要的自动刷新 #

• 检查是否存在SignalR、状态容器等自动数据订阅逻辑，确保更新操作完成后不会触发强制重新加载
• 若使用状态管理，更新后应同步内存中的状态对象，而非直接从数据库重新获取

4. 关键注意事项 #

• 所有数据加载逻辑必须添加明确的触发条件，避免无差别重复执行
• 更新完成后若需留在编辑页，直接使用已修改的对象实例，不要重新从数据库拉取
• 导航时使用forceLoad: true参数，强制浏览器重新请求页面数据，绕过缓存

内容的提问来源于stack exchange，提问作者system threep