Question

我想在输入x和y后显示标记，并从表中读取此数据。我有2个输入，单击“添加”后，一个用于X，另一个用于Y，我将此数据添加到表中，我有2个对象，依此类推...但是标记是在第二次单击后添加的，应该在第一次单击后添加点击

state={
items:[{
      "X": 13.6155611,
      "Y": 51.0331258
    },
    ],
} 

componentDidMount() {
const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [13, 51],
      zoom: 6
    })
 for (var i = 0; i < this.state.items.length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }
}

addItem = (e) => {
    const newItem = {
      "Y": parseFloat(this.state.X),
      "X": parseFloat(this.state.Y),
}
 this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [13, 51],
      zoom: 6
    })
 for (var i = 0; i < this.state.items.length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }
e.preventDefault();
}
render() {
    return (
        <div ref={el => this.mapContainer = el} />

<form onSubmit={this.addItem}>
 <input
              type="number"
              value={this.state.X}
              onChange={e => this.setState({
                X: e.target.value
              })}
            />
            <input
              value={this.state.Y}
              onChange={e => this.setState({
                Y: e.target.value
              })}
            />
 <button>ADD</button>
</form>
)}

Answer 1

在运行for (var i = 0; i < this.state.items.length; i++)时，状态尚未使用您添加的newItem进行更新。创建函数时，它仅知道现有状态。

尝试类似

const newItems = [...this.state.items, newItem]
this.setState(newItems);

// ...

for (const obj of newItems) {
  const myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
  new mapboxgl.Marker()
    .setLngLat(myLatlng)
    .addTo(map);
}

标记会在第二次点击后添加

1 个答案: