Правило исчерпывающей ловушки Реакта срабатывает в одном случае, но не в другом? - PullRequest
Новая
       3

Правило исчерпывающей ловушки Реакта срабатывает в одном случае, но не в другом?

0 голосов
/ 04 июня 2019

Я хотел бы адаптировать эту песочницу кода, https://codesandbox.io/s/lx947qjv0z, для моего собственного приложения React.Я пытался просто useGoogleMap.js, 

import { useEffect, useState, useRef } from "react";
import GoogleMapsApiLoader from "google-maps-api-loader";

const apiKey = "AIzaSyCVBthtEmWi0Ul8mejDQrBlOULXB1kTB3I";

const eventsMapping = {
  onCenterChanged: ["center_changed", map => map.getCenter()],
  onBoundsChanged: ["bounds_changed", map => map.getBounds()]
};

export default function useGoogleMap({ zoom, center, events }) {
  const [mapState, setMapState] = useState({ loading: true });
  const mapRef = useRef();
  useEffect(() => {
    GoogleMapsApiLoader({ apiKey }).then(google => {
      const map = new google.maps.Map(mapRef.current, { zoom, center });
      Object.keys(events).forEach(eventName =>
        map.addListener(eventsMapping[eventName][0], () =>
          events[eventName](eventsMapping[eventName][1](map))
        )
      );

      setMapState({ maps: google.maps, map, loading: false });
    });
  }, []);
  return { mapRef, ...mapState };
}

сделать следующее (поскольку я не верю, что мне нужен events): 

import {useState, useEffect, useRef } from 'react';
import GoogleMapsApiLoader from 'google-maps-api-loader';

const apiKey = process.env.REACT_APP_GOOGLE_MAPS_API_KEY;

export default function useGoogleMap(options) {
  const [mapState, setMapState] = useState();
  const mapRef = useRef();

  useEffect(() => {
    GoogleMapsApiLoader({ apiKey }).then(google => {
      const map = new google.maps.Map(mapRef.current, options);
      setMapState({ maps: google.maps, map });
    });
  }, [options]);
  return { mapRef, ...mapState };
}

В моем собственном коде, если я опускаю options из массива зависимостей, переданного в качестве второго аргумента useEffect(), я получаю предупреждение linter:

В React Hook отсутствует пропущенная зависимость: 'options'

enter image description here

Что меня смущает: почему в исходном коде Sandbox такого предупреждения нет?Не являются ли zoom и center также зависимостями его эффекта в useEffect()?

1 Ответ

1 голос
/ 05 июня 2019

Коды, которые вы отправляете, также получают сообщение об ошибке enter image description here

Эта статья может помочь https://reactjs.org/docs/hooks-faq.html#is-it-safe-to-omit-functions-from-the-list-of-dependencies

По сути, происходит то, что useEffect не имеет немедленного доступа к параметрам. Таким образом, вам нужно передать параметры в качестве параметра для использования Effect как так .... 

export default function useGoogleMap(options) {
  const [mapState, setMapState] = useState({ loading: true });
  const mapRef = useRef();

  useEffect((options) => {

    GoogleMapsApiLoader({ apiKey }).then(google => {
      const map = new google.maps.Map(mapRef.current, options);

      setMapState({ maps: google.maps, map, loading: false });
    });
  }, []);
  return { mapRef, ...mapState };
}

Это избавит вас от ошибки!

...