JSRuntime.InvokeVoidAsync在Blazor服务器应用程序中调用多个函数，而我只告诉它调用一个函数。

Question

我有一个带有两个按钮的Blazor服务器应用程序。第一个按钮调用 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的方法。当我按下按钮调用 TestJSInterop我在控制台得到以下结果。

测试

调用addEditorModel

调用addTab：参数为0

调用addEditorModel

调用addTab：参数为0

当我按下呼叫按钮时 MenuOpen我得到了这个结果。

调用addEditorModel

调用addTab：参数为1

调用addEditorModel

调用addTab：参数为0

调用addEditorModel

调用addTab：参数为0

我知道 OpenNewTab C#方法没有被多次调用，因为当我在那里放了一个断点，然后点击按钮来调用 TestJSInterop 我没有达到断点。

的 JSRuntime.InvokeVoidAsync 调用确实能在 OnAfterRenderAsync.

为什么我会出现这种行为？

Answer 1

我试图理解你的部分代码，但好像我失败了。不过，你应该考虑到以下几点。

1. 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
       }

2. 只有UI事件，比如点击事件，才会导致你的组件重新渲染。如果你需要重新渲染你的组件，以便看到所做的改变，否则，你将不得不调用StateHasChanged方法。

3. 如果您的应用程序正在进行预渲染（render-mode="ServerPrerendered"），您的组件会被渲染两次，因此您可能会看到在控制台窗口中打印了两次消息。这是正常的。

希望这能帮助你... 如果你没有解决你的问题，请发一个完整的代码回帖，我会尽量帮助你解决这个问题。