проблемы при использовании array.map для нулевой записи в реакции

Question

Я пытаюсь отобразить массив местоположений, но не могу это сделать. Я пробовал так много всего, чтобы сопоставить нулевой объект в массиве, но не смог. какую ошибку я здесь делаю? если я использую для l oop вместо функции карты, тогда я могу это сделать, но я застрял с картой. ...

import React from "react";
import { List, ListItem } from "@material-ui/core";
import { Map, Marker, Popup, TileLayer } from "react-leaflet";
import L from "leaflet";
import "leaflet/dist/leaflet.css";
import "./styles.css";
import Icon from "../src/icon.png";
import shadow from "../src/shadow.png";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      location: [
        {
          id: 1,
          machine: 1,
          lat: 51.503,
          lng: -0.091
        },

        null
      ],
      center: [51.505, -0.091],
      zoom: 11,
      marker: null
    };
    this.clickAction = this.clickAction.bind(this);
  }

  Icon = L.icon({
    iconUrl: Icon,
    shadowUrl: shadow,
    iconSize: [38, 50],
    shadowSize: [50, 64],
    iconAnchor: [22, 34], // point of the icon which will correspond to marker's location
    shadowAnchor: [4, 62],
    popupAnchor: [-3, -76] // point from which the popup should open relative to the iconAnchor
  });

  openPopUp(marker, id) {
    if (marker && marker.leafletElement) {
      marker.leafletElement.openPopup(id);
    }
  }

  clickAction(id, lat, lng) {
    this.setState({ marker: id, zoom: 16, center: [lat, lng] });
  }

  render() {
    console.log(this.state);
    return (
      <>
        <Map center={this.state.center} zoom={this.state.zoom}>
          <TileLayer
            attribution='&amp;copy <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            url="https://{s}.tile.osm.org/{z}/{x}/{y}.png"
          />
          {this.state.location &&
            this.state.location.map(location => {
              return location !== null ? (
                <Marker
                  position={[location?.lat, location?.lng]}
                  icon={this.Icon}
                  ref={this.openPopUp(location?.id)}
                >
                  <Popup> {location?.id} </Popup>
                </Marker>
              ) : null;
            })}
        </Map>

        {
          <List style={{ width: "20%", float: "left" }}>
            {this.state.location &&
              this.state.location.map(({ id, machine, lat, lng }) => {
                return (
                  <ListItem
                    key={id}
                    button
                    onClick={() => {
                      this.clickAction(id, lat, lng);
                    }}
                  >
                    Id {id} <br />
                    machine {machine}
                  </ListItem>
                );
              })}
          </List>
        }
      </>
    );
  }
}

... пример кода https://codesandbox.io/s/gallant-star-m42qe?file= / src / App. js: 0-2858

Answer 1

Проблема заключается во втором операторе карты, где вы деструктурируете объект местоположения внутри карты, что приведет к ошибке для null объектов. Чтобы исправить это, вы можете отфильтровать нулевые и другие ложные местоположения перед их сопоставлением:

 this.state.location.filter(location => location).map(/* ... */) 

Вы также можете использовать сокращение Boolean для достижения этого:

this.state.location.filter(Boolean).map(/* ... */) 

Answer 2

Вы передаете null в массиве, поэтому возникает ошибка:

this.state = {
  location: [
    {
      id: 1,
      machine: 1,
      lat: 51.503,
      lng: -0.091
    },
    null // <---- Remove this
  ],

---

Если вы хотите сохранить null, измените эту строку

this.state.location.map(({ id, machine, lat, lng }) => {

в, отфильтруйте все пустые записи перед отображением:

this.state.location.filter(l => l).map(({ id, machine, lat, lng }) => {

РАБОЧАЯ ДЕМО: