React-Leaflet，状态供应位置

Question

我有以下代码：

import React, { Component } from 'react';
import { Map, Marker, Popup, TileLayer } from 'react-leaflet';

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
        coordinates: []
    }
  }
}
componentDidMount() {
    // code to populate coordinates state
}
render() {
    const position = [50, 100]
    return (
        <div className="container">
            <Map center={position} zoom={13}>
            <TileLayer url='http://{s}.tile.osm.org/{z}/{x}/{y}.png' attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
          <Marker position={position}>
              <Popup>
                  <span>A pretty CSS3 popup.<br/>Easily customizable.</span>
              </Popup>
          </Marker>
       </Map>
     </div>
    )
}

这张地图显示正确，除非我尝试使用我所在州的坐标。 State 的输出如下所示：

["86.765", "29.724999999999998", "0", "86.765", "29.724999999999998", "0"]

如何将此数据传递给 position 变量并加以利用？我现在尝试的是：我用来自服务器的相应值定义了另外两个状态 - lat 和 lng，并对这些状态执行 map 以提取所需的值，如下所示：

let latVal = this.state.lat.map(latItem => {
    return latItem;
}
let lngVal = this.state.lng.map(lngItem => {
    return lngItem;
}

但是当我像 let position = [latVal, lngVal] 变量一样将它传递给 position 时，我收到一条错误消息说我的 latVal 是 null，但我可以 console.log render() 函数中的两个值（latVal 和 lngVal），在这种情况下，输出如下所示： 90.7250000000000128.105090.1649999999999929.555000000000003088.233 我认为这会导致错误，我不确定如何我应该转换这些数据以使其工作吗？提前致谢！

UPD 我设法更改了 latVal 和 lngVal 输出，我的新代码如下所示：

let arr = []
let latVal = this.state.lat.map(k => {
  arr.push(k + ' ');
})
let lngVal = this.state.lon.map(i => {
  arr.push(i + ' ');
})

const position = [50, 100];
let newArr = position.concat(arr);

但还是没有运气。

Answer 1

这是一个适当的数组映射，应该可以满足您的需要 - 来自两个州的对数组

this.state.lat.map((value,index)=>[value,this.state.lon[index]])

React-Leaflet，状态供应位置

React-Leaflet, supply position from state

javascript

reactjs

react-leaflet