Как устранить ошибку Typescript - mapbox-gl & React hooks - PullRequest
Новая
       25

Как устранить ошибку Typescript - mapbox-gl & React hooks

0 голосов
/ 07 мая 2020

Новичок в Typescript и нуждается в пояснении, как устранять опечатки.

Я устанавливаю контейнер Mapbox на mapDiv.current - это дает мне эту ошибку:

Введите 'HTMLDivElement | null 'не присваивается типу' строка | HTMLElement '. Тип' null 'не может быть назначен типу' строка | HTMLElement'.ts (2322)

Хотя это можно исправить, выполнив mapDiv.current || ''. Это правильный способ решить проблему данного типа? 

export const Map: FunctionComponent = () => {
    const mapDiv = useRef<HTMLDivElement>(null);
    let [map, setMap] = useState(null);

    useEffect(() => {
        const attachMap = (setMap: React.Dispatch<React.SetStateAction<any>>, mapDiv: React.RefObject<HTMLDivElement>) => {
            const map = new mapboxgl.Map({
                container: mapDiv.current, // ERROR
                container: mapDiv.current || '', // NO ERROR
                style: 'mapbox://styles/mapbox/outdoors-v11',
                center: [-121.91390991210938, 40.316184625814095],
                zoom: 10,
            })
            setMap(map);
        }

        !map && attachMap(setMap, mapDiv)

    }, [map])

    return (
        <div className="Map" ref={mapDiv} />
    )

}

1 Ответ

1 голос
/ 07 мая 2020

Вместо предоставления запасного строкового значения (что может быть не самым элегантным решением, так как он ищет RefObject), вы можете выполнить проверку null / undefined перед установкой mapbox в useEffect крючок. 

useEffect(() => {
  const attachMap = (setMap: React.Dispatch<React.SetStateAction<any>>, mapDiv: React.RefObject<HTMLDivElement>) => {
    if (!mapDiv.current) {
      return;
    }
    const map = new mapboxgl.Map({
      container: mapDiv.current, // ERROR
      container: mapDiv.current || '', // NO ERROR
      style: 'mapbox://styles/mapbox/outdoors-v11',
      center: [-121.91390991210938, 40.316184625814095],
      zoom: 10,
    })
    setMap(map);
  }

  !map && attachMap(setMap, mapDiv)

}, [map]);
...