当中心状态更改时，React传单中心属性不会更改 [英] React leaflet center attribute does not change when the center state changes

问题描述

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中不显示新的中心.但我不知道为什么.我已经检查了状态的变化.地图永远不会回应.有人知道吗???请回答一种解决方法.

When I clicks button, mapCenter state clearly changes to [20, 100] and mapZoom also changes to 5. But in the Map Component Map does not show new center. but I don't know why. I already checked state's change. Map never respond. Does anyone knows??? Please answer a way to figure it out.

推荐答案

除了其 children 以外， MapContainer 道具是不可变的:首次设置后对其进行更改不会对地图实例或其容器.子组件可以使用提供的钩子或MapConsumer组件之一访问由MapContainer元素创建的Leaflet Map实例.
https://react-leaflet.js.org/docs/api-map

Except for its children, MapContainer props are immutable: changing them after they have been set a first time will have no effect on the Map instance or its container. The Leaflet Map instance created by the MapContainer element can be accessed by child components using one of the provided hooks or the MapConsumer component.
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 文档在 setCenter> useMapEvent示例，但未定义此函数.但是，在传单文档中 修改地图状态的方法 有一个功能 setView(center，zoom，options?).

The react-leaflet documentation uses setCenter in it's useMapEvent example, but this function isn't defined. However in leaflets documentation Methods for modifying map state there is a function setView(center, zoom, options?).

这篇关于当中心状态更改时，React传单中心属性不会更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！