Blazor组件在被其他组件调用方法时无法更新UI

Question

我有3个组件。我想要的是从组件B调用组件C的New()方法。 以下代码可以实现此目的（我可以获得Console.Writeline）。但是UI没有更新。我尝试在New()方法中设置StateHaseChanged()，但是这给了我以下错误。非常感谢！

错误

WASM: System.InvalidOperationException：渲染句柄尚未分配。

ComponentA（侧边栏项）

<NavLink href="@href">
    <div @onclick="OnClick.InvokeAsync">@Text</div>
</NavLink>


@code {
    [Parameter] public string Text { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
}

组件B（侧边栏）

<ComponentA Text="Something" Onclick="@(() => componentC.New())" />


@code {
    ComponentC componentC = new ComponentC();
}

组件C（页面）

@code {
    public void New()
    {
        //Dostuff..
        Console.WriteLine("Testing");
        //StateHasChanged();

    }
}

- tbdrz

---

我猜你的组件命名可能有点问题。可能 ComponentB 在内部使用了 ComponentC（在 @code 块中）。这是正确的吗？ - Artak

@Artak，确实如此，我已经在我的问题中进行了更改。谢谢！ - tbdrz

Answer 1

尝试按以下方式在ComponentB中使用ComponentC：

<ComponentA Text="Something" Onclick="@(() => componentC.New())" />
<ComponentC @ref="componentC" />

@code {
    private ComponentC componentC;
}

ComponentBase 类实现了 IComponent.Attach(RenderHandle) 方法，当你在代码中简单地 new-up 组件时，该方法不会被调用。但是，当你在标记中这样做时，一切都会正确地连接起来。

- Artak

---

确实可以解决问题，但是会在页面上呈现组件C。请看组件A = 侧边栏项目，组件B = 侧边栏，组件C = 页面。我已经编辑了我的问题。 - tbdrz

Answer 2

将你的代码改成这样：

<NavLink href="@href">
    <div @onclick="Navigate">@Text</div>
</NavLink>


@code {
    [Parameter] public string Text { get; set; }
    [Parameter] public EventCallback OnClick { get; set; }
    private void Navigate(){
     OnClick.InvokeAsync();
     }
}

- zikria ahmadi