Question

我正在使用react-leaflet map，我用状态更改了很多map属性，但是当使用state for change dragging属性时它不起作用。

/**
     * Shows or hides seats depending on Zoom level.
     */
    handleZoomEnd = () =>
    {
        if (this.map && this.map.leafletElement) {
            let zoomLevel = this.map.leafletElement.getZoom();

            this.setState({
                zoom: zoomLevel,
            });

            if (zoomLevel >= 0) {
                this.setState({draggable: true});
            } else {
                this.setState({draggable: false});
            }

            console.log(this.state.draggable);
        }
    };

我正在通过这种方法改变状态

ROOT Template

问题是状态正在改变，但拖动不受影响。除拖动外，其他选项受状态更改的影响。任何人都能看到我想念的东西吗？

Answer 1

不确定这是否是错误，但是您在相同的函数中在单独的行上更改状态两次，并且状态更改是异步过程，因此可能您遇到了问题。您应该同时设置两个状态。

if (this.map && this.map.leafletElement) {
   let zoomLevel = this.map.leafletElement.getZoom();
   if (zoomLevel >= 0) {
      this.setState({draggable: true, zoom: zoomLevel});
   } else {
      this.setState({draggable: false, zoom: zoomLevel});
   }
}

你的目标是什么？您想根据地图的缩放比例使地图可拖动吗？

修改：您可以尝试在componentDidUpdate中控制可拖动的地图。这样就可以将缩放操作与可拖动操作分开（setZoom只应理想地更新缩放状态）。

componentDidUpdate(prevProps, prevState) {
    if (prevState.zoomLevel !== this.state.zoomLevel) {
      if (this.state.zoomLevel >= 0) {
        this.setState({ draggable: true });
      } else {
        this.setState({ draggable: false });
      }
    }
  }

  handleZoomEnd = () => {
    if (this.map && this.map.leafletElement) {
      let zoomLevel = this.map.leafletElement.getZoom();

      this.setState({ zoom: zoomLevel });
    }
  };

禁用或启用地图拖动

1 个答案: