Blazor 元素在首次加载时不会更新

Question

我在服务器端 blazor 中有一部分页面在第一次加载时不会更新。 重新加载页面后，它会毫无问题地更新并按预期运行。 任何指导将不胜感激。

当有人第一次按下 Open 或 Close 按钮时，它会成功运行代码，但不会更新 UI，因此如果再次按下它，则会引发错误。 但是，正如我之前所说，如果只是刷新了相同的页面，那么我可以单击打开/关闭到我心中的内容，它会更新 UI 并允许正确翻转开关。

<div class="row row-padding mt-5 d-flex justify-content-between">
    <h5 class="secondary-font">Month End</h5>
    </div>
    <hr />
    <div class="row row-padding">
        <table class="table table-striped">
            <thead>
                <tr>
                    <th>Month</th>
                    <th>Status</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                @foreach(var date in OpenMonths)
                {
                    <tr>
                        <td class="align-middle">@date.ToString("MMMM, yyyy")</td>
                        @if (PropertyMonthCloseds.Exists(p => p.Month == date && !p.IsOpen)) 
                        {
                            <td class="align-middle">Closed</td>
                            <td class="align-middle">
                                <button type="button" class="btn btn-link accent-font" @onclick="@(async () => await OpenCloseMonth(date))">Open</button>
                            </td>
                        }
                        else
                        {
                            <td class="align-middle">Open</td>
                            <td class="align-middle">
                                <button type="button" class="btn btn-link accent-font" @onclick="@(async () => await OpenCloseMonth(date))">Close</button>
                            </td>
                        }
                    </tr>
                }
            </tbody>
        </table>
    </div>

private async Task OpenCloseMonth(DateTime date)
    {
        try
        {
            if (PropertyMonthCloseds.Exists(p => p.Month == date))
            {
                var prop = PropertyMonthCloseds.FirstOrDefault(p => p.Month == date);
                prop.IsOpen = !prop.IsOpen;
                await Repo.UpdatePropertyMonthClosed(prop);
                Toast.ShowSuccess("Month End change saved.");
            }
            else
            {
                var now = DateTime.UtcNow;
                var newProp = new PropertyMonthClosed
                {
                    Month = date,
                    CreatedBy = User.UserId,
                    ModifiedBy = User.UserId,
                    CreatedOn = now,
                    ModifiedOn = now,
                    PropertyId = PropId
                };

                await Repo.CreatePropertyMonthClosed(newProp);
                Toast.ShowSuccess("Month Closed.");
            }
            await ProcessOpenMonths();
        }
        catch(Exception ex)
        {
            ShowInnerException(ex);
        }
    }

    private async Task ProcessOpenMonths()
    {
        var subs = await Repo.GetSubmissions(PropId);
        OpenMonths = subs.GroupBy(x => new { Month = x.SubmissionDate.Month, Year = x.SubmissionDate.Year })
            .OrderByDescending(o => o.Key.Year).ThenByDescending(t => t.Key.Month)
            .Select(s => new DateTime(s.Key.Year, s.Key.Month, 1))
            .ToList();
    }

Answer 1

请将 StateHasChanged() 方法添加到 OpenCloseMonth() function 的末尾。 那应该立即刷新 UI。