在 React-Leaflet 中映射状态

Question

我无法尝试在我的 React-Leaflet 项目中映射状态。这是我的状态以及我如何在地图上标记标记。

this.state = {
   markers: [
       {
          _id: 'SomeId',
          position:[51.509,-0.03],
          content: 'Something'}
       }
   ]      
}


{this.state.markers.map((position, _id, content) => 
       <Marker 
           key={_id} 
           position={position}>
       <Popup>
         <span>{content}</span>       
       </Popup>
     </Marker>
)}

我明白了

"Uncaught TypeError: Cannot read property 'lat' of null"

Answer 1

错误可能是由您代码的其他部分产生的，因为在您包含的内容中没有任何对象的纬度属性。

因此，为了从存储在状态中的对象数组中呈现标记，您应该在使用 map 循环时解构标记数组中的对象属性，以便直接使用它们：

{this.state.markers.map(({position, _id, content}) => 
       <Marker
            key={_id}
            position={position}
            icon={customMarker}>
            <Popup>
              {content}
            </Popup>
       </Marker>)
}

Demo

Answer 2

callback-function 有 3 个参数，第一个参数是数组中的当前条目。必须通过它访问必要的属性。

{this.state.markers.map(marker =>
  <Marker key={marker._id} position={marker.position}>
    <Popup>
      <span> <br/> {marker.content}</span> 
    </Popup>  
  </Marker> 
)}

在 React-Leaflet 中映射状态

Mapping state In React-Leaflet

mapping

leaflet

reactjs

react-leaflet