Blazor Server集成Leaflet：静态方法无法触发组件重渲染求解

这个问题在Blazor Server里很常见——静态的JSInvokable方法没法直接触发组件UI更新，因为它没有组件实例的上下文，自然调用不了InvokeAsync(StateHasChanged)。给你两种靠谱的解决方案，优先推荐第一种官方常用的方式：

方案一：使用DotNetObjectReference传递组件实例给JS #

这是Blazor官方推荐的JS与组件实例交互的方式，让JS直接调用组件的实例方法，而非静态方法，这样就能正常触发UI更新了。

组件代码修改 #

@implements IAsyncDisposable
@using Microsoft.JSInterop

<div>
  Latitude: @LatLng.Lat.ToString("0.00000") , Longitude : @LatLng.Lng.ToString("0.00000")
</div>

@code {
    private LatLng LatLng { get; set; } = new LatLng(); // 初始化默认坐标
    private DotNetObjectReference<YourComponentName>? _componentReference;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 创建组件实例的引用
            _componentReference = DotNetObjectReference.Create(this);
            // 将引用传递给JS，让JS保存起来
            await JS.InvokeVoidAsync("registerComponentRef", _componentReference);
        }
    }

    // 改为实例方法，标记JSInvokable
    [JSInvokable("GetCoordinatesFromLeaflet")]
    public async Task UpdateCoordinates(LatLng newCoordinates)
    {
        LatLng = newCoordinates;
        // 现在可以正常调用InvokeAsync触发UI更新
        await InvokeAsync(StateHasChanged);
    }

    // 销毁组件时释放引用，避免内存泄漏
    public async ValueTask DisposeAsync()
    {
        _componentReference?.Dispose();
    }

    // 你的LatLng模型类
    public class LatLng
    {
        public double Lat { get; set; }
        public double Lng { get; set; }
    }
}

JS代码修改 #

let componentRef; // 保存组件实例引用

// 接收Blazor传递的组件引用
function registerComponentRef(ref) {
    componentRef = ref;
}

function onMapClick(e) { 
  marker.setLatLng(e.latlng); 
  // 调用组件实例的方法，而非静态方法
  componentRef.invokeMethodAsync('UpdateCoordinates', e.latlng); 
}

原理说明 #

通过DotNetObjectReference，JS拿到了组件的实例引用，调用的是组件的实例方法，此时方法处于组件的上下文环境中，就能正常调用InvokeAsync(StateHasChanged)触发UI重新渲染了。

方案二：使用静态事件通知组件更新 #

如果一定要保留静态的JSInvokable方法，可以通过静态事件的方式，让组件订阅事件，当静态方法被调用时触发事件，组件收到事件后更新UI。

组件代码修改 #

<div>
  Latitude: @LatLng.Lat.ToString("0.00000") , Longitude : @LatLng.Lng.ToString("0.00000")
</div>

@code {
    private LatLng LatLng { get; set; } = new LatLng();

    protected override void OnInitialized()
    {
        // 订阅静态事件
        MapCoordinateHandler.CoordinatesUpdated += OnCoordinatesUpdated;
    }

    private async void OnCoordinatesUpdated(LatLng newCoords)
    {
        LatLng = newCoords;
        await InvokeAsync(StateHasChanged);
    }

    // 组件销毁时取消订阅，避免内存泄漏
    public void Dispose()
    {
        MapCoordinateHandler.CoordinatesUpdated -= OnCoordinatesUpdated;
    }

    // 静态事件处理类
    public static class MapCoordinateHandler
    {
        public static event Action<LatLng>? CoordinatesUpdated;

        [JSInvokable]
        public static void GetCoordinatesFromLeaflet(LatLng tmp)
        {
            // 触发事件通知组件
            CoordinatesUpdated?.Invoke(tmp);
        }
    }

    public class LatLng
    {
        public double Lat { get; set; }
        public double Lng { get; set; }
    }
}

JS代码无需修改 #

还是原来的静态方法调用：

function onMapClick(e) { 
  marker.setLatLng(e.latlng); 
  DotNet.invokeMethodAsync('TestProject', 'GetCoordinatesFromLeaflet', e.latlng); 
}

注意事项 #

这种方式要特别注意内存泄漏，组件销毁时必须取消订阅静态事件，否则组件实例会被事件引用无法回收。

为什么原来的静态方法不行？ #

StateHasChanged和InvokeAsync都是组件实例方法，只能在组件的实例上下文中调用。静态方法属于类本身，没有关联任何组件实例，自然无法直接调用这些实例方法，也就没法触发UI更新。

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