StateHasChanged 未更新 UI

Question

我知道这是一个常见问题，但没有一个解决方案能解决我的问题。所有的解释一开始似乎都是合乎逻辑的，但在实施它们之后，它完全没有任何作用，我在这里有点不知所措。

我没有做任何事情来更新我的 UI 组件，只是显示一些来自数据注释属性的错误消息。我正在手动检查我的数据模型的有效性，如果无效，我将更新错误消息列表，这些消息又应该显示在我的 UI 中。

这是我的组件：

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using Syncfusion.Blazor.Popups
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Calendars
@using Syncfusion.Blazor.Inputs
@using Syncfusion.Blazor.SplitButtons
@using Syncfusion.Blazor.Data
@using Blazored.Toast.Services
@using Microsoft.Data.SqlClient
@using System.Text
@using Syncfusion.Blazor.Spinner
@using System.ComponentModel.DataAnnotations;

<SfGrid ID="Grid" Query="@query" HtmlAttributes="htmlAttributes" DataSource="@transactions" @ref="Grid" AllowPaging="true" AllowFiltering="true" AllowExcelExport="true"
        AllowSorting="true" Toolbar="@(new List<string>() {"Edit", "ExcelExport" })">
    <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings>
    <GridPageSettings PageCount="5" PageSize="20" PageSizes="@(new string[] { "5", "10", "20", "40", "50", "All" })"></GridPageSettings>
    <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings>
    <GridEvents OnActionBegin="ActionBeginHandler" OnToolbarClick="ToolbarClick" TValue="unknownasgdata"></GridEvents>
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Dialog"  Dialog="DialogParams" ShowConfirmDialog="true">
        <Validator>
            <DataAnnotationsValidator></DataAnnotationsValidator>
        </Validator>
        <Template>
            @{
                var unknownItem = (context as unknownasgdata);
                <div>
                    @if (validationResults.Any())
                    {
                        <div class="validation-summary">
                            @foreach (var validationResult in validationResults)
                            {
                                <div>@validationResult.ErrorMessage</div>
                            }
                        </div>
                    }
                    <br/>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                        <label><b>Bezeichnung</b></label><br />
                        @(unknownItem.description)
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label><b>Betriebsstätte</b></label><br />
                            @(unknownItem.house)
                        </div>

                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label><b>Leistungsnummer</b></label><br />
                            @(unknownItem.leinr)
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label><b>Preis</b></label><br />
                            <SfNumericTextBox @bind-Value="@(unknownItem.articleprice)" ></SfNumericTextBox>
                        </div>
                    </div>
                    <br/>
                    <div class="form-row">
                        <div class="form-group col-md-6">
                        <label><b>Mahlzeitart</b></label><br/>
                        <SfDropDownList TValue="string" TItem="string" DataSource="@(new List<string> { "Frühstück", "Mittagessen", "Abendessen" })" @bind-Value="@(unknownItem.selectedMahlzeit)"></SfDropDownList>
                        </div> 
                    </div>
                </div>
            }
        </Template>
        <FooterTemplate>
            <SfButton OnClick="@SubmitForm" IsPrimary="true">Speichern</SfButton>
            <SfButton OnClick="Cancel">Abbrechen</SfButton>
        </FooterTemplate>
    </GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(unknownasgdata.description) HeaderText="Beschreibung"></GridColumn>
        <GridColumn Field=@nameof(unknownasgdata.leinr) HeaderText="Lst.Nummer" Width="150"></GridColumn>
        <GridColumn Field=@nameof(unknownasgdata.house) HeaderText="Betriebsstätte" Width="100"></GridColumn>
    </GridColumns>
</SfGrid>

@code{

    private async Task<bool> ValidateModel()
    {
        validationResults.Clear();
        bool isValid = Validator.TryValidateObject(unknownItem, validationContext, validationResults, true);
        Task.Delay(3000);
        return isValid;
    }

    private async Task SubmitForm()
    {
        if (await ValidateModel())
        {
            // Proceed with database updates
            // Your database update logic here

        }
        else
        {
            // Handle validation failures
            // Show validation messages
            validationResults = new List<ValidationResult>(validationResults);
            await Task.Delay(3000);
            await InvokeAsync(() =>
            {
                StateHasChanged(); // Ensure the UI is updated to reflect validation errors
            });
            await Task.Yield();
        }
    }

}

当然，这里和那里缺少一些对类很重要的代码，但您可以假设初始化变量等基础知识正在工作。我想做的只是提交我的表格并事先进行验证。 ValidateModel() 填充我想在我的剃刀组件中显示的列表validationResults。理论上，由于我正在检查剃刀组件内的元素，因此在更新列表后组件不应该立即重新渲染吗？我尝试多次调用 StateHasChanged 同步和异步，并尽可能使用 Task.Delay，但没有任何效果，也没有让我更新 UI。

Answer 1

将 @ref="GridRef" 添加到 SfGrid，然后调用 GridRef.PreventRender(false)；在需要刷新模板的地方。此问题是由 Syncfusion 团队尝试优化性能引起的。（他们正在阻止这些更改的渲染） 我现在也遇到了同样的问题。