使用array.map在react中输入空值时出现问题

Question

我正在尝试映射位置数组，但无法这样做。为了将空对象映射到数组中，我尝试了很多方法，但是失败了。我在这里犯什么错误？如果我使用for循环而不是map函数，那么我可以做到，但是我对map事物感到困惑。...

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: [
    {
      id: 1,
      machine: 1,
      lat: 51.503,
      lng: -0.091
    },
    null // <---- Remove this
  ],

---

如果要保留null，则更改此行

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

to，在映射之前过滤掉所有空条目：

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

工作演示：

Answer 2

问题出在您的第二个地图语句中，您在其中分解了地图内的位置对象，这将导致null对象出错。要解决此问题，您可以在映射它们之前过滤掉null和其他虚假位置：

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

您也可以使用Boolean速记来实现：

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