即使存在数据React-Leaflet，Map（）也不是函数

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我是如何实现的）你传递给markers组件的props对象的<MarkerList>属性。这将为您提供分配给它的data的markers={data}值。现在你正在尝试map()而不是props参数，它是一个Object而不是一个数组。

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

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（）方法中，您应该处理数据为null时的情况。 EX：

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

}