单向数据属性属性更新时不更新组件

发布于 2025-02-09 11:29:18 字数 2158 浏览 1 评论 0原文

我有一段时间的时间理解为什么当更新简单的单向数据属性属性(列表)时,为什么我的组件的UI不会重新渲染。我还有其他可以使用相同方法重新渲染的可路由组件,但这种不可用的组件似乎并不想以相同的方式行事?我的理解是,组件应更新,而无需在任何一个onclick事件上调用statehaschanged()

@inherits Aivia.Bases.AltitudePage;

@inject IAlertService _alertService
@inject IJSRuntime _js;

@if (dsAlerts != null && dsAlerts.Any())
{
    <div class="alerts mt-3">
        <div class="container">
            @foreach (var dto in dsAlerts)
            {
                <div class="alert alert-primary p-3" role="alert">
                    <div class="row g-0">
                        <div class="col-auto icon">
                            <i class="fa-solid fa-comments"></i>
                        </div>
                        <div class="col">
                            <div class="title">
                                @dto.Title
                            </div>
                            
                            <div class="description">
                                @dto.Description
                            </div>

                            <div class="actions">
                                <button type="button" class="btn btn-primary" onclick="@(() => Read(dto))">
                                    <i class="fa-regular fa-circle-check me-2"></i>
                                    Dismiss
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
}

@code {

    private IEnumerable<dtoAlert> dsAlerts = Enumerable.Empty<dtoAlert>();

    protected override void OnInitialized()
    {
        GetAlerts();
    }

    private void GetAlerts()
    {
        this.dsAlerts = _alertService.queryUnreadAlerts(this.UserID).OrderBy(x => x.CreatedOn).ToList();
    }
    
    private void Read(dtoAlert dto)
    {
        _alertService.Read(this.UserID, dto.ID);
        GetAlerts();
    }
    
}

I'm having a heck of a time understanding why my component's UI will not re-render when a simple one-way databound property (List) is updated. I have other routable components re-rendering using the same approach without issue, but this non-routable component does not seem to want to behave the same way? It is my understanding that the component should update WITHOUT having to call StateHasChanged() on either onclick events.

@inherits Aivia.Bases.AltitudePage;

@inject IAlertService _alertService
@inject IJSRuntime _js;

@if (dsAlerts != null && dsAlerts.Any())
{
    <div class="alerts mt-3">
        <div class="container">
            @foreach (var dto in dsAlerts)
            {
                <div class="alert alert-primary p-3" role="alert">
                    <div class="row g-0">
                        <div class="col-auto icon">
                            <i class="fa-solid fa-comments"></i>
                        </div>
                        <div class="col">
                            <div class="title">
                                @dto.Title
                            </div>
                            
                            <div class="description">
                                @dto.Description
                            </div>

                            <div class="actions">
                                <button type="button" class="btn btn-primary" onclick="@(() => Read(dto))">
                                    <i class="fa-regular fa-circle-check me-2"></i>
                                    Dismiss
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
}

@code {

    private IEnumerable<dtoAlert> dsAlerts = Enumerable.Empty<dtoAlert>();

    protected override void OnInitialized()
    {
        GetAlerts();
    }

    private void GetAlerts()
    {
        this.dsAlerts = _alertService.queryUnreadAlerts(this.UserID).OrderBy(x => x.CreatedOn).ToList();
    }
    
    private void Read(dtoAlert dto)
    {
        _alertService.Read(this.UserID, dto.ID);
        GetAlerts();
    }
    
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

耳根太软 2025-02-16 11:29:18

onclick =“@(()=&gt; read; read(dto))只需要@onclick =“@(()=&gt; read; read(dto))”

onclick="@(() => Read(dto))" simply needed to be @onclick="@(() => Read(dto))"

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文