Question

我需要在React中为我的谷歌地图设置新的经纬度
常量mapRef返回错误：对象可能为'null'。 TS2531
当我使用let代替React.useRef时，它可以工作。
我认为应将type设置为mapRef，但我不知道该在哪里找到它。
但是我认为useRef是更好的解决方案，不是吗？

Google地图库：https://www.npmjs.com/package/@react-google-maps/api

const libraries = ["places"];

const CustomMap = () => {
  const { isLoaded, loadError } = useLoadScript({
    googleMapsApiKey: "MY_API_KEY",
    libraries,
  });

  const options = {
    disableDefaultUI: true,
    zoomControl: true,
  };

  const mapRef = React.useRef();
  const onMapLoad = React.useCallback((map) => {
    mapRef.current = map;
  }, []);

  const panTo = React.useCallback(({ lat, lng }) => {
    if (null !== mapRef.current) {
      // There is error 
      // mapRef.current Object is possibly 'null'.  TS2531
      mapRef.current.panTo({ lat, lng });
      mapRef.current.setZoom(18);
    }
  }, []);
  //console.log("maps show coord: ", props.coordinates);

  if (loadError) {
    return (
      <Fragment>
        <p>Error</p>
      </Fragment>
    );
  }
  if (!isLoaded) {
    return (
      <Fragment>
        <p>loading</p>
      </Fragment>
    );
  }
  return (
    <div>
      <Search panTo={panTo} />
      <GoogleMap
        id="map"
        mapContainerStyle={mapContainerStyle}
        zoom={15}
        center={center}
        //options={options}
        onLoad={onMapLoad}
      />
    </div>
  );
};

Answer 1

使用this package查找类型，然后为useRef设置类型并用null初始化。

const mapRef: Type = React.useRef(null); // Replace `Type` with the actual type from the package

在您的情况下，类型似乎为google.maps.Map，

const mapRef: google.maps.Map = React.useRef(null);

应该可以解决问题。

Answer 2

是的，应该在React.useRef（）中定义类型，并且只有知道您要使用的库是什么才可能知道地图。但是，在您说出来之前，请尝试研究图书馆文档。

关于空错误，请参考this文章

创建调用useRef钩子时，务必将null作为默认值传递。

因此定义应类似于：

const mapRef = React.useRef<TheTypeYouNeed>(null);

Answer 3

解决方法是这样的：
地图实例的类型为： google.maps.Map
Google地图库：npmjs.com/package/@react-google-maps/api

 const mapRef = useRef<google.maps.Map>();
 const onMapLoad = React.useCallback((map: google.maps.Map) => {
    mapRef.current = map;
    if (defaultLocation !== null && props.place_id !== "") {
      setCoords(defaultLocation);
      setDefaultZoom(14);
      map.panTo(defaultLocation);
      try {
        FetchPlaceDetail(props.place_id, map, props.setPlaceDetail);
      } catch (error) {
        console.error(error);
      }
    }
  }, []);

...

mapRef.current?.panTo({ lat, lng });

TS2531 |反应useRef-对象可能未定义

3 个答案: