Blazor Server使用JSRuntime.InvokeVoidAsync调用JQ,JS，javascript 多个函数

我有一个带有两个按钮的Blazor服务器应用程序。第一个按钮在C＃中调用MenuOpen方法，第二个按钮在C＃中调用TestJSInterop方法。这是代码：

@inject IJSRuntime JSRuntime;

<!-- buttons -->

@code {
    List<int> tabs = new List<int>();

    protected override Task OnAfterRenderAsync(bool firstRender)
    {
        JSRuntime.InvokeVoidAsync("monacoInit");
        return base.OnAfterRenderAsync(firstRender);
    }

    async Task OpenNewTab(string title)
    {
        int newId = await JSRuntime.InvokeAsync<int>("addEditorModel", new object[]
        {
            title, "test", "test", "test"
        });
        tabs.Add(newId);
        await JSRuntime.InvokeVoidAsync("addTab", newId);
    }

    async Task MenuOpen()
    {
        await OpenNewTab("testing");
    }

    async Task TestJSInterop()
    {
        await JSRuntime.InvokeVoidAsync("console.log", "test");
    }
}

在Javascript中，我已将console.log添加到从C＃调用的每个方法中。当我按下按钮调用TestJSInterop时，在控制台中得到以下结果：

测试

调用addEditorModel

调用addTab：参数为0

调用addEditorModel

调用addTab：参数为0

当我按下按钮呼叫MenuOpen时，得到以下结果：

调用addEditorModel

调用addTab：参数为1

调用addEditorModel

调用addTab：参数为0

调用addEditorModel

调用addTab：参数为0

我知道OpenNewTab C＃方法不会被多次调用，因为当我在其中放置一个断点并单击该按钮以调用TestJSInterop时，我没有到达断点。

JSRuntime.InvokeVoidAsync调用在OnAfterRenderAsync中可以正常工作。

为什么会出现这种现象？

我试图理解您的部分代码，但是好像我失败了。但是，您应考虑以下因素：

每次渲染组件时，都会执行OnAfterRenderAsync方法。它主要用于初始化JavaScript对象。当您要初始化JavaScript对象（我想只对一次，对吗？）时，应将代码放置在if语句中，以检查这是第一次：

if( firstRender ) { // Here's you place code that is executed only once // the parameter firstRender is evaluted to true only the first time // the OnAfterRenderAsync method is executed }
只有UI事件（例如click事件）会导致您的组件重新呈现。
如果您需要重新渲染组件以查看所做的更改
否则，您将必须调用StateHasChanged方法
如果您的应用是预渲染（render-mode =“ ServerPrerendered”），则组件将渲染两次，因此您可能会在控制台窗口中看到两次打印的消息。还行吧。

希望对您有所帮助…如果您没有解决问题，请发布代码的完整回购单，我将尽力帮助您。

创作不易，用心坚持，请喝一怀爱心咖啡！继续坚持创作~~