簡體   English   中英

Blazor 級聯組件防止 StateHasChanged

[英]Blazor cascading component preventing StateHasChanged

所以我是 Blazor 的新手,我剛剛發現了 CascadingValue 以及它們可能用於顯示錯誤消息。 我正在創建一個 Outlook 插件,用於在 Sharepoint 中保存郵件和附件,因此我正在動態檢索當前的 Outlook 使用 Office 的郵件和我選擇的郵件。 但是現在我正在嘗試為錯誤消息實現級聯組件,我遇到了 StateHasChanged 的問題。

以下代碼是我的級聯錯誤組件:

<CascadingValue Value=this>
    @ChildContent
</CascadingValue>
<div class="error-container @(ErrorMessage == null ? "hidden" : "")">
    <span class="error-message">
        @ErrorMessage
    </span>
    <a class="dismiss-error" @onclick="DismissError">x</a>
</div>

@code {
    [Parameter]
    public RenderFragment ChildContent { get; set; }
    public string ErrorMessage { get; set; }

    public void ProcessError(Exception ex)
    {
        ErrorMessage = ex.Message;
        StateHasChanged();
    }

    public void DismissError()
    {
        ErrorMessage = null;
        StateHasChanged();
    }
}

我遇到問題的組件(至少是重要部分):

<div>
    {Showing details from OutlookMail here}
</div>
@code {
    [CascadingParameter] public Error Error { get; set; }
    public OutlookMail OutlookMail { get; set; }
    private static Action<OutlookMail> _receiveMailAction;
    protected override async Task OnInitializedAsync()
    {
        _receiveMailAction = UpdateMail;
        await base.OnInitializedAsync();
    }
    private void UpdateMail(OutlookMail mail)
    {
        InvokeAsync(() =>
        {
            OutlookMail = mail;
            StateHasChanged();
        });
    }
    [JSInvokable]
    public static void ReceiveMail(OutlookMail mail)
    {
        _receiveMailAction?.Invoke(mail);
    }
    public async Task MethodWithError()
    {
        try
        {
            await DoStuffWithPossibleError();
        }
        catch (Exception e)
        {
            Error.ProcessError(e);
        }
    }
}

一切正常,直到調用 Error.ProcessError 並顯示錯誤消息,之后 StateHasChanged 停止重新渲染我的組件,從而為用戶提供不一致的數據。

我可能做錯了什么,因為我真的找不到其他人有同樣的問題,但我沒有看到它,所以我希望這里的人能更好地了解哪里出了問題,或者也許如果問題是像這樣使用 CascadingValue ,甚至是顯示錯誤消息的更好方法。

感謝所有幫助。

編輯 1:經過更多研究,它似乎實際上並沒有更新 OutlookMail,即使我將它移到 InvokeAsync 之外。 所以我的組件實例可能會發生一些奇怪的事情

在我第一次編輯后,我發現實例確實存在問題,因為我在 OnInitialized 中覆蓋了 static 操作,每次創建新實例時,舊實例不再有效。 並且返回錯誤的代碼恰好有一個帶有重定向回調到同一頁面的身份驗證對話框,它在之后直接關閉,但加載頁面實際上會創建我的組件的一個新實例,這反過來又會使我的用戶使用的那個無效. 所以我可能只需要創建一個 singleton 服務來處理傳入的郵件數據,這樣我的組件就可以始終訪問正確的數據。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM