当中心状态改变时，React 传单中心属性不会改变

Question

App.js

import { useState } from 'react';

const App = () => {
  // This state is used to the center attribute of MapContainer component
  const [mapCenter, setMapCenter] = useState([34.80746, -40.4796]);
  // This state is used to the zoom attribute of MapContainer component
  const [mapZoom, setMapZoom] = useState(3);

  const onClickHandler = () => {
    setMapCenter([20, 100]);
    setMapZoom(5);
  };

  return (
    <>
      <button onClick={onClickHandler}>Change map's center location</button>
      <Map center={mapCenter} zoom={mapZoom} />
    </>
  );
};

Map.js

import React from 'react';
import './Map.css';
import { MapContainer, TileLayer } from 'react-leaflet';

function Map({ center, zoom }) {
  return (
    <div className="map">
      <MapContainer center={center} zoom={zoom}>
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a 
                href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
    </div>
  );
}

export default Map;

Map.css

.map {
  height: 500px;
  background-color: white;
  padding: 1rem;
  border-radius: 20px;
  margin-top: 16px;
  box-shadow: 0 0 8px -4px rgba(0, 0, 0, 0.5);
}

.map .leaflet-container {
  height: 100%;
}

当我单击按钮时，mapCenter 状态明显更改为 [20, 100]，mapZoom 也更改为 5。但是在 Map Component Map 中没有显示新的中心。但我不知道为什么。我已经检查了状态的变化。 地图从不响应。有谁知道？？？请回答一个解决方法。

Answer 1

const Map = ({ center, zoom }) => {
  const [map, setmap] = useState(null);
  if (map) {
    map.flyTo(center);
  }
  return (
    <div className="map">
      <LeafletMap
        center={center}
        zoom={zoom}
        whenCreated={setmap}
        scrollWheelZoom={false}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        ></TileLayer>
      </LeafletMap>
    </div>
  );
};

Answer 2

除了children，MapContainer 属性是不可变的：第一次设置后更改它们不会对 Map 实例或其容器产生影响。 由 MapContainer 元素创建的 Leaflet Map 实例可以由子组件使用提供的钩子之一或 MapConsumer 组件访问。
https://react-leaflet.js.org/docs/api-map

ChangeView.js

function ChangeView({ center, zoom }) {
  const map = useMap();
  map.setView(center, zoom);
  return null;
}

Map.js

function Map({ center, zoom }) {
  return (
    <div className="map">
      <MapContainer center={center} zoom={zoom} scrollWheelZoom={false}>
        <ChangeView center={center} zoom={zoom} /> 
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        />
      </MapContainer>
    </div>
  );
}

react-leaflet 文档在它的useMapEvent example 中使用了setCenter，但是没有定义这个函数。然而在传单文档 Methods for modifying map state 中有一个函数 setView(center, zoom, options?)。