React js google map @ реагировать-google-maps / api добавить маркер. Слишком много повторных визуализаций. React ограничивает количество рендеров, чтобы предотвратить бесконечный цикл

Question

У меня есть карта, где я должен добавить места для определенных камер, поэтому каждая камера управляет определенными c точками.

Когда я добавляю камеры, нет проблем, но когда я добавляю спецификацию c очков, за комнату я получаю следующую проблему.

Ничего не меняется, между добавлением комнаты или добавлением балла за комнату.

Я только обновляю статус, но я получаю только следующую проблему когда я добавляю точку.

Слишком много перерисовок. React ограничивает количество рендеров, чтобы предотвратить бесконечность l oop.

Ссылка: codesandbox

Код:

import React from "react";
import ReactDOM from "react-dom";

import Map from "./Map";
import "./styles.css";

import DataTable from "react-data-table-component";

const API_KEY = "";

/*const useStyles = makeStyles(theme => ({
  root: {
    width: "100%"
  },
  heading: {
    fontSize: theme.typography.pxToRem(15),
    fontWeight: theme.typography.fontWeightRegular
  }
}));*/

const center = {
  lat: 38.9065495,
  lng: -77.0518192
};

//const classes = useStyles();
//className={classes.heading}

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      paths: [
        /*{ lat: 38.97330905858943, lng: -77.10469090410157 },
        { lat: 38.9209748864926, lng: -76.9083102888672 },
        { lat: 38.82689001319151, lng: -76.92204319902345 },
        { lat: 38.82261046915962, lng: -77.0181735701172 },
        { lat: 38.90174038629909, lng: -77.14314305253907 }*/
      ],
      camera: [
        { name: "Camera-0", lat: 38.9066695149473, lng: -77.05199421413822 },
        {
          name: "Camera-1",
          lat: 38.90661524734408,
          lng: -77.05199823745174
        },
        {
          name: "Camera-2",
          lat: 38.906553674436374,
          lng: -77.05199823745174
        }
      ],
      parking: [[], [], []],
      typeCamera: false,
      idCamera: 0
    };
  }

  _handleKeyDown = event => {
    let { typeCamera, idCamera, camera } = this.state;
    switch (event.keyCode) {
      case 104:
        if (idCamera + 1 <= camera.length - 1) {
          idCamera = idCamera + 1;
          this.setState({ idCamera });
        }
        break;
      case 101:
        this.setState({ typeCamera: !typeCamera });
        break;
      case 98:
        if (idCamera - 1 > -1) {
          idCamera = idCamera - 1;
          this.setState({ idCamera });
        }
        break;
      default:
        break;
    }
  };

  componentDidMount() {
    document.addEventListener("keydown", this._handleKeyDown);
  }

  handleMapClick = ({ latLng: location }) => {
    let { camera, parking, typeCamera, idCamera } = this.state;
    if (typeCamera) {
      let obj = {
        name: "Camera-" + camera.length,
        id: camera.length,
        lat: location.lat(),
        lng: location.lng()
      };
      camera.push(obj);
      parking.push([]);
      console.log("handleMapClick", typeCamera, camera, parking);
      this.setState({ camera, parking });
    } else {
      let obj = {
        name: "Parking-" + idCamera + "-" + parking[idCamera].length,
        lat: location.lat(),
        lng: location.lng()
      };
      //parking[idCamera].push(obj);
      let p = Object.assign({}, parking);
      p[idCamera].push(obj);
      console.log("handleMapClick", typeCamera, parking);
      this.setState({ parking: p });
    }
  };

  render() {
    const { camera, parking } = this.state;

    const columns = [
      {
        name: "name",
        selector: "name"
      },
      {
        name: "Latitude",
        selector: "lat"
      },
      {
        name: "Longitude",
        selector: "lng"
      }
    ];

    return (
      <div className="App2">
        <Map
          apiKey={API_KEY}
          center={center}
          setCenter={center => this.setState({ center })}
          camera={camera}
          parking={parking}
          onClick={this.handleMapClick}
          changeParking={parking => this.setState({ parking })}
          changeCamera={camera => this.setState({ camera })}
        />
        {camera.map((pos, key) => {
          console.log("parking[key]", parking[key]);
          let data = parking[key];
          return (
            <div
              key={key}
              style={{
                height: "100%",
                border: "1px solid #dadce0",
                backgroundColor: "#fff"
              }}
              className={"marginTop20 paddingTop10 tableRadius borderColorG"}
            >
              {false &&
                data.map((st, k) => {
                  return <div>{st.name}</div>;
                })}
              <DataTable
                title={"Camera-" + key + " (" + parking[key].length + ")"}
                columns={columns}
                data={data}
                highlightOnHover
                defaultSortField="name"
                pagination
                paginationTotalRows={parking[key].length}
              />
            </div>
          );
        })}
      </div>
    );
  }
}

//export default withStyles(useStyles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Изменить решение:

this.setState({
        parking: Object.assign(this.state.parking, {
          [idCamera]: this.state.parking[idCamera].concat(obj)
        })
      });