使用react-leaflet时如何解决'TS2769没有过载匹配此调用'

Question

我正在尝试在我的react应用程序上实现Leaflet map组件。这就是我的组件的样子：

import React from "react";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import "./styles.scss";

const position = [51.505, -0.09];

const LocationMap: React.FC = () => {
  return (
    <section className="find-container container">
      <h2 className="find-title title">Find us</h2>
      <Map center={position} zoom={12}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution="&copy; <a href=&quot;http://osm.org/copyright&quot;>OpenStreetMap</a> contributors"
        />
      </Map>
    </section>
  );
};

export default LocationMap;

当我运行“ npm start”时，项目无法编译，并显示此错误：

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<MapProps>): Map<MapProps, Map>', gave the following error.
    Type 'number[]' is not assignable to type 'LatLng | LatLngLiteral | LatLngTuple | undefined'.
      Type 'number[]' is missing the following properties from type '[number, number]': 0, 1
  Overload 2 of 2, '(props: MapProps, context?: any): Map<MapProps, Map>', gave the following error.
    Type 'number[]' is not assignable to type 'LatLng | LatLngLiteral | LatLngTuple | undefined'.
      Type 'number[]' is not assignable to type 'LatLngTuple'.  TS2769

有人知道如何解决？

Answer 1

请确保您声明正确的头寸类型，以避免出现您提到的错误：

const position: [number, number] = [51.505, -0.09];

也因为您正在使用打字稿，所以请确保已安装最新的@types/react-leaflet版本