为什么如果不运行两次代码，就无法在 blazor 组件中向 Google 地图添加数据？

Question

我以前没有Blazor，也没有什么异步编程经验。我正在探索在谷歌地图项目中使用Blazor，并尝试使用谷歌地图javascript api在地图上添加一个geojson点。我不确定最好的方法是什么，所以我的计划是更新blazor组件中隐藏div的内部html，并在我的google map api调用中引用该值。当我调用AddMapData(从我的db中获得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);
}
}