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

В методе render () вы должны обрабатывать случай, когда данные равны нулю.Пример:

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

}

Answer 2

const MarkerList = markers => {

TO

const MarkerList = {markers} => {

Вам необходимо получить доступ к (путем деструктурирования , как я реализовал) свойство markers объекта props, передаваемого компоненту <MarkerList>.Это даст вам значение data, которое вы ему присвоили markers={data}.Прямо сейчас вы пытаетесь map() использовать аргумент 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).