为什么在Blazor组件中添加Google Maps数据需两次执行代码？

Blazor 组件首次加载的生命周期执行顺序为：OnInitializedAsync → 首次组件渲染到DOM → OnAfterRenderAsync(firstRender=true)

• 如果你只在OnAfterRenderAsync的首次渲染分支调用AddMapData：
  1. 首次渲染时mapData还是默认空值，隐藏div渲染出来的内容为空
  2. 进入OnAfterRenderAsync后才执行数据查询、给mapData赋值，此时组件已经完成渲染，赋值不会自动同步到DOM，必须触发重渲染才会更新隐藏div的内容
  3. 你赋值后立刻调用initMap，此时重渲染还未执行，隐藏div依然是空值，因此读不到数据
• 两个生命周期都调用时可以正常运行的原因：
  你在OnInitializedAsync中就完成了数据查询和mapData赋值，赋值发生在首次渲染之前，因此首次渲染时隐藏div已经带上了正确的GeoJSON内容，后续OnAfterRenderAsync中调用initMap时自然能读到值。但此时OnAfterRenderAsync里的AddMapData完全多余，会额外产生一次数据库查询请求，属于无用代码。

你可以根据自己的需求选择任意一种方案：

• 方案1（改动最小）：直接删除OnAfterRenderAsync里的AddMapData调用即可，只保留OnInitializedAsync里的调用，既可以正常运行，还能减少一次不必要的数据库请求。
• 方案2（数据加载逻辑保留在OnAfterRenderAsync中）：调整代码等待重渲染完成后再调用地图初始化方法：

private bool _mapDataLoaded = false;
protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await AddMapData();
        _mapDataLoaded = true;
        StateHasChanged(); // 手动触发重渲染，更新隐藏div内容
        return;
    }
    if (_mapDataLoaded)
    {
        // 重渲染完成后再调用初始化地图的方法
        await JSRuntime.InvokeVoidAsync("initMap", null);
        _mapDataLoaded = false;
    }
}

• 方案3（更推荐，无需额外DOM节点）：完全不需要用隐藏div传值，直接把GeoJSON作为参数传给JS方法，省去DOM读写的步骤：
  1. 先修改JS侧的initMap函数，增加一个接收GeoJSON的入参
  2. 调整C#调用逻辑：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        await AddMapData();
        // 直接把mapData作为参数传给JS方法
        await JSRuntime.InvokeVoidAsync("initMap", mapData);
    }
}

这种方案不需要额外的隐藏div，也不用处理重渲染的时序问题，代码更简洁高效。

内容的提问来源于stack exchange，提问作者pooteeweet