当中心状态改变时，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 属性是不可变的:在第一次设置后更改它们不会对地图实例或其容器.由 MapContainer 元素创建的 Leaflet Map 实例可以由子组件使用提供的钩子之一或 MapConsumer 组件访问.
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屋！