如何使用“反应手册”显示我的搜索栏？

Question

我试图使用react-leaflet库，所以我创建了一个组件SearchControl，但不幸的是它不能工作.

下面是我的组件的代码：

import { useEffect } from "react";
import { useMap } from "react-leaflet";
import { GeoSearchControl } from "leaflet-geosearch";
import "react-leaflet-geosearch/lib/react-leaflet-geosearch.css";

const SearchControl = props => {
  const map = useMap();

  useEffect(() => {
    const searchControl = new GeoSearchControl({
      provider: props.provider,
      ...props
    });

    map.addControl(searchControl);
    return () => map.removeControl(searchControl);
  }, [props]);

  return null;
};
export default SearchControl;

但问题是，我得到了以下错误：_reactLeaflet.useMap is not a function。

我该怎么办才能解决这个问题？

您可以在那里看到完整的代码：我的代码

非常感谢你的帮助！

Answer 1

package.json中的依赖项已经过时。

改变反应-传单使用v3.2.0。

此外，您还需要包含基本的react (对于useEffect)，所以react应该至少构建在v16.8.0上。

下面是一个更新的package.json：

{
  "name": "react-leaflet",
  "version": "1.0.0",
  "description": "",
  "keywords": [],
  "main": "src/index.js",
  "dependencies": {
    "leaflet": "1.7.1",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-leaflet": "3.2.0",
    "react-leaflet-fullscreen": "1.0.1",
    "react-leaflet-geosearch": "0.3.0",
    "react-scripts": "4.0.3"
  },
  "devDependencies": {},
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

编辑：

除了注释之外，这是一个更新的index.js，它使用MapContainer而不是Map

import React from "react"; import ReactDOM from "react-dom"; import { MapContainer, TileLayer, Marker, Popup } from "react-leaflet"; import "./styles.css"; import { OpenStreetMapProvider } from "react-leaflet-geosearch"; import SearchControl from "./SearchControl";

const App = () => {   const prov = OpenStreetMapProvider();

  return (
    <div>
      <MapContainer center={[51.505, -0.091]} zoom={13}>
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
        />
        <SearchControl
          provider={prov}
          showMarker={true}
          showPopup={false}
          popupFormat={({ query, result }) => result.label}
          maxMarkers={3}
          retainZoomLevel={false}
          animateZoom={true}
          autoClose={false}
          searchLabel={"Enter address, please"}
          keepResult={true}
        />
      </MapContainer>
    </div>   ); };

const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);