我在编程和反应方面很新。目前尝试在MapboxGL地图上添加图层，但出现错误msg，它说：

  

'mapContainer'未定义为no-undef

我在做什么错了？

import React,{useEffect} from 'react';
import mapboxgl from 'mapbox-gl';
mapboxgl.accessToken = 'PUBLIC TOKEN'

 const getMap = () => {
return new mapboxgl.Map({
  container: mapContainer,style: 'mapbox://styles/mapbox/streets-v11',center: [9,47],zoom: 10
});



  const Map = () => {
    useEffect(() => {
      const map = getMap();

  map.on('move',() => {
    this.setState({
      lng: map.getcenter().lng.toFixed(4),lat: map.getcenter().lat.toFixed(4),zoom: map.getzoom().toFixed(0)
    });
  });

  map.on('load',() => {
    map.addLayer({
      id: 'streets',type: 'line',source: {
        type: 'geojson',data:
          'http://someWFSAPIdata=application/json'
      },layout: {
        'line-join': 'round','line-cap': 'round'
      },paint: {
        'line-color': '#08363e','line-width': 0.8
      }
    });
  });
},[]);

并按如下所示渲染

 return (
    <div>
      <div ref={el => (this.mapContainer = el)} classname='mapContainer' />
      <h1>Hello there geoReact</h1>
    </div>
  );

由于我正在使用功能组件，因此不再需要渲染，但是我不确定它有什么问题。

非常感谢