Reactjs 在地图轻微移动或在react map gl中单击之前不显示标记

在我滚动或拖动地图之前，不会加载此标记。即使在刷新后，标记也不会显示。我已经硬编码了这个值。我只是想在不拖动或单击的情况下显示标记

import React from 'react';
import Icon from 'react-fa';

import ReactMapGL, { Marker } from 'react-map-gl';

export default class EdgeExplorer extends React.Component {
  state = {
    viewport: {
      width: window.innerWidth,
      height: window.innerHeight,
      latitude: 36.778259,
      longitude: -119.417931,
      zoom: 4,
      mapboxApiAccessToken: 'I will write my token here',
    }
  }
  staticMarker = () => {
    return (
      <Marker latitude={37.773972} longitude={-122.431297} offsetLeft={-2}
        offsetTop={-22}>
        <Icon name="map-pin" className="text-white" />
      </Marker>
    );
  }
  render() {
    const { viewport } = this.state;
    return (
      <ReactMapGL
        {...viewport}
        mapStyle='mapbox://styles/mapbox/dark-v9'
        onViewportChange={v => this.setState({ viewport: v })
        }>
        {this.staticMarker()}
      </ReactMapGL>
    );
  }
}

从“React”导入React；
从“react fa”导入图标；
从“react map gl”导入react MapGL，{Marker}；
导出默认类EdgeExplorer扩展React.Component{
状态={
视口：{
宽度：window.innerWidth，
高度：window.innerHeight，
纬度：36.778259，
经度：-119.417931，
缩放：4，
mapboxApiAccessToken:'我将在此处写入我的令牌'，
}
}
staticMarker=（）=>{
返回(
);
}
render（）{
const{viewport}=this.state；
返回(
this.setState（{viewport:v}）
}>
{this.staticMarker（）}
);
}
}

在此处使用ComponentDidMount（）并更新视口值。它可以正常工作。

使用ComponentDidMount（）并在此处更新视口值。它会很好用的