Map() 不是一个函数，即使数据存在 React-Leaflet

Question

我正在尝试重新创建 React-Leaflet 标记列表示例。我有一组要发送到 MarkerList 的对象，这些对象会变成片段并呈现在地图上。但是我的地图功能不起作用，使用浏览器调试工具我知道数据在那里，它定义 markers 以获得我想要的数组但我不断收到 markers.map 不是的错误一个功能。任何向正确方向点头都会有所帮助。

const PopupMarker = content => (
  <Marker position={content.coords}>
    <Popup>{content.applicant}</Popup>
  </Marker>
);

const MarkerList = markers => {
  const items = markers.map(props => (
    <PopupMarker key={markers.id} {...props} />
  ));
  return <Fragment>{items}</Fragment>
};
class MyMap extends Component {

  static propTypes = {
    data: PropTypes.array,
  }

  state = {
    lat: 37.7749,
    lng: -122.4194,
    zoom: 13,
  }

  handleMapChange = () => {
    console.log('I work');
  }

  render() {
    const { data } = this.props;
    const position = [this.state.lat, this.state.lng];

    const southWest = L.latLng(37.713159, -122.527084);
    const northEast = L.latLng(37.814666, -122.365723);
    const bounds = L.latLngBounds(southWest, northEast);

    return (
      <Map 
        center={position} 
        maxBounds={bounds} 
        zoom={this.state.zoom} 
        style={{height: '30em', width: '75%'}}
        onMoveend={this.handleMapChange}
        onZoomend={this.handleMapChange}
      >
        <TileLayer
          attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
        />
        {data !== null &&
          <MarkerList markers={data} />
        }
      </Map>
    )
  }
}

Answer 1

const MarkerList = markers => {

到

const MarkerList = {markers} => {

您需要访问 (通过 destructuring how I've implemented) the markers property of the props object you're passing to <MarkerList> component. This will give you the value of data that you assigned to it markers={data}. Right now you're trying to map() over the props 参数，这是一个对象而不是数组。

但是进一步查看您的代码，您可能需要完全重写此函数...

const MarkerList = markers => {
  const items = markers.map(props => (
    <PopupMarker key={markers.id} {...props} />
  ));
  return <Fragment>{items}</Fragment>
};

类似...

const MarkerList = {markers} => {
  const items = markers.map({id, ...rest} => (
    <PopupMarker key={id} {...rest} />
  ));
  return <Fragment>{items}</Fragment>
};

鉴于我们不知道 makers 数据的形状，我不能肯定这是正确的解决方案，但有一件事是肯定的，如果 markers 是一个数组您将无法访问其中的 id 属性 (markers.id)。

Answer 2

在render()方法中，需要处理data为null的情况。例如：

render() {
const { data } = this.props;
const position = [this.state.lat, this.state.lng];

const southWest = L.latLng(37.713159, -122.527084);
const northEast = L.latLng(37.814666, -122.365723);
const bounds = L.latLngBounds(southWest, northEast);
if(!data) { 
  return null;
}
return (
  <Map 
    center={position} 
    maxBounds={bounds} 
    zoom={this.state.zoom} 
    style={{height: '30em', width: '75%'}}
    onMoveend={this.handleMapChange}
    onZoomend={this.handleMapChange}
  >
    <TileLayer
      attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
    />
    <MarkerList markers={data} />
  </Map>
)

}

Map() 不是一个函数，即使数据存在 React-Leaflet

Map() is not a function even though data is present React-Leaflet

javascript

reactjs

react-leaflet