調用 StateHasChanged 后不會重新渲染組件

Question

我已閱讀文章“ Blazor 中組件之間通信的 3 種方式”，並嘗試這樣做。 我在@body 下有消息組件，並且必須根據@body 組件消息中的用戶操作進行更改

@inject ClientMessage clientMessage
@inherits LayoutComponentBase
@using Site.Shared.Components

<div class="sidebar">
<AdminMenu />
</div>

<div class="main">
    <div class="content px-4">
        @Body
    </div>
   <Message/>
</div>

@code
{
    protected async Task ChangeState()
    {
        await InvokeAsync(StateHasChanged);
    }

    protected override void OnInitialized()
    {
        clientMessage.MsgChange += ChangeState;
    }
 }

消息組件：

@inject ClientMessage clientMessage
<div style="@(IsVisble ? "display:block" : "display:none")" class="@MsgClass" role="alert">
    @if (clientMessage != null)
    {
        @clientMessage.Message
    }
</div>

@code {

    public bool IsVisble
    {
        get
        {
            if (string.IsNullOrEmpty(@clientMessage.Message))
            {
                return false;
            }

            return true;
        }
    }

    public string MsgClass
    {
        get
        {
            if (clientMessage == null)
            {
                return string.Empty;
            }

            string msgClass;

            switch (clientMessage.MsgType)
            {
                case EMsgType.Info:
                    msgClass = "alert alert-info";
                    break;
                case EMsgType.Success:
                    msgClass = "alert alert-success";
                    break;
                case EMsgType.Warning:
                    msgClass = "alert alert-warning";
                    break;
                case EMsgType.Error:
                    msgClass = "alert alert-danger";
                    break;
                case EMsgType.NoMsg:
                default:
                    msgClass = string.Empty;
                    break;
            }

            return msgClass;
        }
    }
}

留言類

public class ClientMessage
{
    public event Func<Task> MsgChange;

    public ClientMessage(string msg, EMsgType msgType)
    {
        this.Message = msg;
        this.MsgType = msgType;
        NotifyStateChanged();
    }

    public void SetMsg(string msg, EMsgType msgType)
    {
        this.Message = msg;
        this.MsgType = msgType;
        NotifyStateChanged();
    }

    public string Message { get; set; }

    public EMsgType MsgType { get; set; }

    private void NotifyStateChanged()
    {
        if (MsgChange != null)
        {
            MsgChange.Invoke();
        }
    }
}

ClientMessage 類由 DI 作為單例注入。 如果我在 @body 組件中調用 SetMsg(newMsgm, msgType) 然后調用 ChangeState() 方法但什么也沒發生，我的意思是組件不會重新渲染。 如果我改為“InvokeAsync”使用“Invoke”，則會出現錯誤“當前線程與 Dispatcher 無關。在觸發渲染或組件狀態時使用 InvokeAsync() 將執行切換到 Dispatcher。”。 如果我重新加載頁面，我可以看到消息。

我做錯了什么，如何強制重新呈現消息組件？

Answer 1

我解決了這個問題。 也許它會幫助某人。

我本地化了問題 - 在 NavigationManager.NavigateTo("some_page") 被調用后@body 被更改時，StateHasChanged() 不會重新呈現消息組件。 我嘗試了可以​​觸發 StateHasChanged() 的不同地方，如果我將它移動到 Message.razor，它會按預期工作。

最好在開始時閱讀文檔而不是文章:)