Javascript 未重新渲染反应传单多边形

我正在尝试使用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>
  );
}
}

类SimpleExample扩展了React.Component{
构造函数（）{
超级（）；
此.state={
职位：[[51.505，-0.09]]
};
}
addPosition=（e）=>{
const{positions}=this.state
console.log（'添加位置'，位置）
位置。推动（[e.latlng.lat，e.latlng.lng]）
this.setState（{positions}）
}
render（）{
console.log（'Should render new positions'，this.state.positions）
常量静态位置=[[51.505，-0.09]，[51.4958128370432，-0.10728836030595570314]，[51.49602657961649，-0.09956359863281251]]
返回(
);
}
}

请检查这把小提琴：

---

您可以在jsfiddle中复制它，它应该可以工作。希望能有帮助

我有一个空数组的初始状态，所以您第一次单击决定从何处开始绘制

，当然您可以使用初始坐标，这完全取决于您

使用箭头函数

（prevState）=>{}

可以根据“以前的状态”正确地更新状态，这里我们采用新的坐标，并使用

concat（）

将其添加到

位置

状态

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

const React=window.React；
const{Map，tillelayer，Marker，Popup，Polygon}=window.react传单；
类SimpleExample扩展了React.Component{
构造函数（）{
超级（）；
此.state={
职位：[]
};
}
addPosition=（e）=>{
const newPos=[e.latlng.lat，e.latlng.lng]；
this.setState（prevState=>(
{
位置：prevState.positions.concat（[newPos]）
}
));
}
render（）{
返回(
);
}
}
window.ReactDOM.render（，
document.getElementById（'container'）；

您可以在jsfiddle中复制它，它应该可以工作。希望能有帮助

我有一个空数组的初始状态，所以您第一次单击决定从何处开始绘制

，当然您可以使用初始坐标，这完全取决于您

使用箭头函数

（prevState）=>{}

可以根据“以前的状态”正确地更新状态，这里我们采用新的坐标，并使用

concat（）

将其添加到

位置

状态

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

const React=window.React；
const{Map，tillelayer，Marker，Popup，Polygon}=window.react传单；
类SimpleExample扩展了React.Component{
构造函数（）{
超级（）；
此.state={
职位：[]
};
}
addPosition=（e）=>{
const newPos=[e.latlng.lat，e.latlng.lng]；
this.setState（prevState=>(
{
位置：prevState.positions.concat（[newPos]）
}
));
}
render（）{
返回(
);
}
}
window.ReactDOM.render（，
document.getElementById（'container'）；

您能提供更多关于您要完成的任务的详细信息吗？当然，只想创建一个由用户创建的多边形，在地图中单击即可。这是用户在地图中单击，坐标保存在状态中，多边形由此获得其坐标。Edgar Enriquez:）您可以提供有关您尝试完成的操作的更多详细信息吗？当然，只想创建一个用户通过单击地图创建的多边形。这是用户在地图上单击，坐标保存在状态上，通过此操作多边形将获得其坐标。Edgar Enriquez:）谢谢！我知道我唯一需要更改的是addPosition中的语句，但我无法理解为什么我的原始代码不起作用。\ux。谢谢！我发现我唯一需要更改的是addPosition中的语句，但我无法理解为什么我的原始代码不起作用。

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'));