为什么我不能在没有 运行 代码的情况下将数据添加到 blazor 组件中的 google 地图两次？

Question

我以前没有 Blazor，也没有什么异步编程经验。我正在探索将 Blazor 用于 google 地图项目，并尝试使用 google 地图 javascript api 向地图添加一个 geojson 点。我不确定执行此操作的最佳方法，所以我的计划是更新 blazor 组件中隐藏 div 的内部 html 并在我的 google 映射中引用该值api 打电话。 当我调用 AddMapData（它从我的数据库中获取一个 geojson 字符串）以在 OnInitializedAsync 和 OnAfterRenderAsync 中设置内部 div 的 html 时，一切都很好：

@page "/map"

@inject IJSRuntime JSRuntime
@using DataAccessLibrary


@inject IGeoData _db
<div id="info-box"></div>
<div hidden id="mapData">@mapData </div>

<h3>Map</h3>

<div id="map" ></div>


@code {

    private string mapData;
    private List<string> data;

    async Task<bool> AddMapData()
    {
        data = await _db.GetGeoData();
        mapData = data.First<string>();
        mapData = mapData.Substring(1, mapData.Length - 2);
        return true;
    }

    protected override async Task OnInitializedAsync()
    {
        await AddMapData();
    }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await AddMapData();
            await JSRuntime.InvokeVoidAsync("initMap", null);
        }
    }
}

为什么我必须在两者中调用 AddMapData？我的第一个想法是只在 OnAfterRenderAsync 覆盖中调用它，但 div.innerhtml 值为“”。任何想法或意见表示赞赏。

Answer 1

我通过在 OnAfterRenderAsync 中的 AddMapData() 之后添加 StateHasChanged() 来修复此问题。我不再覆盖 OnInitializedAsync。

 protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await AddMapData();
        StateHasChanged();

        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("initMap", null);
        }
    }