为什么多重反应-呈现折页画编辑，我如何修复它？

Question

解决方案：

到目前为止，我能找到的最好的解决办法是--如果有人想出更好的办法，我会把这个打开。分两部分：

1. 分配一个“高速缓存破坏”密钥，如下面的更新(使用UUID或比Math.random更好的东西。这将修复初始问题，但会创建一个新问题，即当编辑禁用尝试从不复存在的几何图形中解锁时，后续呈现将导致错误。
2. 通过跟踪编辑模式并通过在编辑过程中返回shouldComponentUpdate false来禁用映射组件的呈现，解决了这个次要问题，如下所示： shouldComponentUpdate(){返回!isEditingGeometry()；}

更新：

自从我发布这篇文章以来，我就开始假设这是DOM/React生命周期问题。这以最愚蠢的方式“解决”了问题：

<Polygon key={Math.random()} positions={positions}/>

如果有人有更好的想法或者我想出了一个更健壮的解决方案，我会把这个问题保留下来，但我现在的印象是，这个问题不在我的代码中，而是在一个或多个库中，但我不知道如何着手修复它，我感到有点困惑，因为这不是一个已知的问题。肯定有人在某个地方用传单画？

问题：

我有一个项目，我试图使用传单绘制编辑工具的背景下的反应。下面是这方面最基本的实现的示例，它反映了我正在做的事情。如果您创建了一个新的创建-反应应用程序，并用这段代码替换了App.js，那么您可以运行这个程序并查看bug。

所发生的事情:地图呈现，形状呈现。如果你点击“编辑”按钮，几何图形就会被赋予句柄，你可以调整它们。这一切都很好。

如果发生后续呈现(我在示例代码中通过使用计时器更改状态来伪造此结果)，则当您单击“编辑”时，几何图形会接收句柄，但不能调整--只有句柄才能移动。取消并再次单击“编辑”(在另一个呈现之前)允许您编辑形状。

这让我抓狂--我遇到了几个帖子，表明在4.12版本之后的传单绘制和多边形编辑有一个普遍的问题，但是锁定那个版本似乎没有什么帮助(我只是得到了一系列反对的警告)。

这是图书馆里的一个bug，还是我在做一些我没有看到的反应方面的愚蠢行为？任何想法，甚至是功能性的解决办法，都是感激地接受的。

Relevant lines from package.json: 
   "react": "^16.2.0", 
   "react-leaflet": "^1.8.0", 
   "react-leaflet-draw": "^0.18.0", 
   "leaflet": "^1.3.0", 
   "leaflet-draw": "^0.4.9",

​

import React, {Component} from 'react';

import './App.css';
import {
	Map,
	Circle,
	LayersControl,
	FeatureGroup,
	Polygon,
	TileLayer
} from 'react-leaflet';
import {EditControl} from "react-leaflet-draw"

class App extends Component {

	constructor(props) {
		super(props);
		this.state={
			thing:'stuff'
		}
	}

	componentDidMount(){
		// This is a demo hack just to force a second render
		setTimeout(() => {
			this.setState({thing:'otherstuff'});
		}, 2000);
	}

	render() {
		console.log("Render...");
    
    // Building geometries like this into an array and then in return 
    // mimics what my production code is doing, but I see the same problem 
    // if I put the geometry JSX inline below 
		let positions =[[37, -109.05],[41, -109.03],[41, -102.05],[37, -102.04]];
		let tileServerURL='http://tile.stamen.com/watercolor/{z}/{x}/{y}.png';
		let editableGeometry = [];
		editableGeometry.push(<Circle key="circle" center={[37, -109.05]} radius={2000} />);
		editableGeometry.push(<Polygon key="polygon" positions={positions}/>);


		return (
			<div style={{width:'100vw',height:'100vh'}}>
			<Map ref='map' center={[37, -109.05]} zoom={13} className="ps_n3_mapComponent" style={{width:'100vw',height:'100vh'}}>
				<LayersControl position='topright'>
					<TileLayer key="tilelayer" url={tileServerURL}/>
					<FeatureGroup ref='editableFeaturegroup'>
						<EditControl/>
						{editableGeometry}
					</FeatureGroup>
				</LayersControl>
			</Map>
		</div>);
	}
}

export default App;

​

Answer 1

我在处理反应传单时也遇到了同样的问题。我变得非常沮丧，写了我自己的实现传单作为一个反应组件。看一看：https://github.com/Chris502/PureLeafletMap

它仍然需要一些能够接受更多的配置道具，目前正在这些工作，但我认为这是一个良好的开端。

*编辑*

这不是对实际问题的答案-反应传单和传单绘制。这是一个映射组件，它允许您加载geoJSON特性/绘制和编辑它们，而不需要Edit Mode布尔值或shouldComponentUpdate逻辑。我会举出一个有用的例子。

Answer 2

我也有问题，让反应传单抽签合作。我也感到很沮丧，以至于在这里实现了一个分叉：https://github.com/andrewdodd/react-leaflet-draw

我对反作用传单绘制的主要不满之处在于它自动将一个FeatureGroup嵌入到控件中，它用于在编辑时存储形状，但不能与之交互或修改。这会导致在以反应方式(即不是面向DOM的leaflet.js方式)处理事情时出现各种问题，这可能是您正在经历的。

阅读我的叉中的代码可能会让您相信，只编写自己的包装器(或者将文件从我的叉子复制到项目中)就更容易了。

FWIW，“示例”实际上比库本身更难阅读和理解，因为示例必须处理存储状态等问题。

Answer 3

如果您使用和多边形坐标来自道具。您应该使用useEffect和useState，当道具发生更改时，整个组件重新进行重新划分。

const EditPolygon = ({ coordinates }: OwnProps) => {
  const [polygonData, setPolygonData] = useState()

  useEffect(() => {
    setPolygonData(coordinates)
  }, [coordinates]) 

return (
<FeatureGroup>
  <EditControl />
<Polygon positions={coordinates} key={some.id}>
</FeatureGroup>
)