Блог

Пожалуйста, рассмотрите некоторый код ниже:

 import React, { useEffect, useState } from 'react';
import { Dialog } from '@material-ui/core';
import mapboxgl from 'mapbox-gl';

export default function UseMapbox() {
  const classes = useStyles();
  mapboxgl.accessToken = token;
  const mapRef = React.useRef();

 
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [10, 10],
      zoom: 9
    });
  }, []);


  return (
    <Dialog
      open
      onClose={onClose}
    >

      <div ref={mapRef} className={classes.map} />
    </Dialog>
  );
}

  

Проблема, с которой я сталкиваюсь, заключается в том, что mapRef.current не определен.
Если я не использую диалоговое окно, оно работает должным образом. итак, я думаю, что useEffect был запущен до того, как диалоговое окно было полностью отображено.

У меня была аналогичная проблема при непосредственном использовании mapbox-gl.

Я решил это, добавив оболочку вместо того, чтобы ссылаться на нее напрямую как таковую:

 import React, { useEffect, useState } from 'react';
import { Dialog } from '@material-ui/core';
import mapboxgl from 'mapbox-gl';

export default function UseMapbox() {
  return (
    <Dialog open onClose={onClose}>
      <MapboxWrapper />
    </Dialog>
  );
}

const MapboxWrapper = () => {
  const classes = useStyles();
  
  useEffect(() => {
    const map = new mapboxgl.Map({
      container: mapRef.current,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [10, 10],
      zoom: 9
    });
  }, []);


  return <div ref={mapRef} className={classes.map} />
}