Question

我正在尝试使用react的状态制作动态多边形，但不会重新渲染小叶多边形。

目标是创建用户在地图中单击的多边形。

class SimpleExample extends React.Component {
constructor() {
  super();
  this.state = {
    positions: [[51.505, -0.09]]
  };
}

addPosition = (e) => {
  const {positions} = this.state
  console.log('Adding positions', positions)
  positions.push([e.latlng.lat, e.latlng.lng])
  this.setState({positions})
}

render() {
    console.log('Should render new positions', this.state.positions)
    const staticPositions = [[51.505, -0.09], [51.4958128370432, -0.10728836059570314], [51.49602657961649, -0.09956359863281251]]
  return (
    <Map 
      center={[51.505, -0.09]} 
      onClick={this.addPosition}
      zoom={13} 
      >
      <TileLayer
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
      />
      <Polygon positions={this.state.positions} color="blue" />
      <Polygon positions={staticPositions} color="red" />
      <Polyline positions={this.state.positions} />
    </Map>
  );
}
}

请查看这个小提琴： https://jsfiddle.net/cesargdm/j2g4ktsg/1/

Answer 1

你可以在 jsfiddle 中复制它，它应该有效。希望它有所帮助。

我有一个空数组的初始状态，所以你的第一次点击决定你开始绘制<Polygon>的位置，当然你可以使用一个初始坐标，这完全取决于你。

使用箭头功能(prevState) => {}，您可以根据“之前的状态”正确更新状态，这里我们将采用新坐标并使用concat()将其添加到positions国家。

您可以找到有关更新状态here的更多信息。

const React = window.React;
const { Map, TileLayer, Marker, Popup, Polygon } = window.ReactLeaflet;

class SimpleExample extends React.Component {
  constructor() {
    super();
    this.state = {
      positions: []
    };
  }

  addPosition = (e) => {
    const newPos = [e.latlng.lat, e.latlng.lng];
    this.setState(prevState => (
      {
        positions: prevState.positions.concat([newPos])
      }
    ));
  }

  render() {

    return (
      <Map 
        center={[51.505, -0.09]} 
        onClick={this.addPosition}
        zoom={13}>
        <TileLayer attribution='&copy; <ahref="http://osm.org/copyright">
          OpenStreetMap</a> contributors'
          url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        />
        <Polygon positions={this.state.positions} color="blue" />
      </Map>
    );
  }
 }
 window.ReactDOM.render(<SimpleExample />, 
  document.getElementById('container'));

React-Leaflet多边形不会被重新渲染

1 个答案: