React-Leaflet 地图不更新

Question

我的问题是，react-leaflet<MapContainer>并不以我动态设置的位置为中心。基本逻辑是，我有一个表单，在其中输入街道和门牌号，然后调用 Nominatim 并获取一些 JSON 格式数据，从中提取建筑物的纬度和经度。这些经纬度和时间我传递给我的，<MapContainer>但它无论如何都没有回应。使用react-leaflet v2它工作得很好，但是在我更新到v3之后它就停止了。

每当我设置默认位置值时，MapContainer 都会以该位置为中心。但是，当我通过 Nominatim 调用动态传递另一个值时，它不起作用。

在这里我呼吁提名：

const getSearchData = async () => {

    const exampleReq = `https://nominatim.openstreetmap.org/search/${query}?format=json&building=*&addressdetails=1&limit=1&polygon_geojson=1`;

    const response = await fetch(exampleReq);

    const data = await response.json();

    // console.log(data);

    if (data === undefined || data.length === 0) {

        // array empty or does not exist

        console.log("data array is empty");

        alert("Given address unrecognized! Try again please.")

        setLatitude(DEFAULT_LATITUDE);

        setLongitude(DEFAULT_LONGITUDE);

    }else{

        setLatitude(data[0].lat);

        setLongitude(data[0].lon);

    }

};

这是我的表单的提交：

<form className={style.searchForm} onSubmit={e => {

                e.preventDefault();

                setQuery(street + " " + houseNumber.replace(/\//g, "-") + ", Tallinn");

                setPosition({

                    ltd: lat, 

                    lng: long

                });

这是我的 MapBox 组件，其中包含我的传单地图：

const MapBox = (props) => {

  useEffect(()=>{

      console.log("MAPBOX!");

      console.log("updateMap() - lat ---> " + props.latitude);

      console.log("updateMap() - long ---> " + props.longitude);

      updateMap();

  },[props.street, props.houseNumber]);

  const passStreet = props.street;

  const passHouseNumber = props.houseNumber;

Answer 1

我能够解决它。在文档中是这样描述的：除了其子级之外，MapContainer 属性是不可变的：第一次设置后更改它们不会对 Map 实例或其容器产生任何影响。子组件可以使用提供的挂钩之一或 MapConsumer 组件来访问由 MapContainer 元素创建的 Leaflet Map 实例。这段代码有助于理解：function MyComponent() {&nbsp; const map = useMap()&nbsp; console.log('map center:', map.getCenter())&nbsp; return null}function MyMapComponent() {&nbsp; return (&nbsp; &nbsp; <MapContainer center={[50.5, 30.5]} zoom={13}>&nbsp; &nbsp; &nbsp; <MyComponent />&nbsp; &nbsp; </MapContainer>&nbsp; )}我实施的：function MyComponent(props) {const map = useMap();map.setView(props.center, props.zoom);return null;}