Как сделать два маркера в буклете

Question

Я хочу добавить два маркера после метода componentDidUpdate в реагировать. маркер не на первых порах. Я получаю положение маркера в методе componentDidUpate. проблема в том, когда я пытаюсь условно добавить маркер после воспроизведения анимации. это показывает мне другую ошибку в другой ситуации.

вот мой основной компонент рендера

 return (
      <div>
        <Map
          id="map"
          ref="leaflet"
          bounds={mapBounds}
          boundsOptions={{ padding: [10, 10] }}
          center={position}
          zoom={this.state.zoom}
          minZoom={this.state.minZoom}
          maxZoom={this.state.maxZoom}
        >
          <LayersControl position="topright">
            <LayersControl.BaseLayer name="OpenStreetMap">
              <TileLayer url="http://{s}.tile.osm.org/{z}/{x}/{y}.png" />
            </LayersControl.BaseLayer>
            <LayersControl.BaseLayer name="Google Streets" checked={true}>
              <GoogleLayer googlekey={key} maptype={road} />
            </LayersControl.BaseLayer>
          </LayersControl>

          <Polyline
            color="#111B24"
            weight="4"
            lineCap="round"
            positions={polylines}
            smoothFactor={1}
          />

          {this.props.currentAsset !== null ? (
            <Circle
              center={this.props.currentAsset.info.position}
              radius={this.props.currentAsset.radius * 1000}
            />
          ) : null}

          <AssetIcon markers={markers} />
          <LandMarkPopUp landMarkList={markers} />




        </Map>



        {isAnimating ? (
          <div className="mapOverLay">
            <Grid>
              <Grid.Column floated="left" width={5}>
                <div>
                  <h3>
                    <strong className="overlayHead">Speed: </strong>{" "}
                    {layoutData.speed} km/h
                  </h3>
                  <h3>
                    <strong className="overlayHead">Date: </strong>{" "}
                    {layoutData.date}
                  </h3>
                  <h3>
                    <strong className="overlayHead">Time: </strong>{" "}
                    {layoutData.time}
                  </h3>
                </div>
              </Grid.Column>
              <Grid.Column width={10}>
                <Button.Group>
                  <Button
                    icon="backward"
                    content="Slow Speed"
                    onClick={this.animationBackwardSpeedBtn}
                  />

                  <Button
                    icon={this.state.icon}
                    content={this.state.content}
                    onClick={this.animationOnOffButton}
                  />

                  <Button
                    icon="forward"
                    content="Fast Speed"
                    onClick={this.animationForwardSpeedBtn}
                  />
                </Button.Group>
              </Grid.Column>
            </Grid>
          </div>
        ) : null}
      </div>
    );

в моем компоненте сделал метод обновления я получаю значение позиции маркера

 componentDidUpdate(prevProps, prevState) {
    if (prevProps.currentAsset !== this.props.currentAsset) {
      this.circleBound(this.props.currentAsset);
    } else if (prevProps.animate !== this.props.animate) {
      var markerInfo = this.props.animate;
      console.log("markerInfo");
      var bounds = [];
      for (var i in markerInfo) {
        if (markerInfo[i].position[0] != 0 || markerInfo[i].position[1] != 0) {
          bounds.push(markerInfo[i].position);
        }
      }
      this.setState({
        mapBounds: bounds
      });

      var result = [];

      markerInfo.map((x, i) => {
        result.push({
          key: i,
          position: markerInfo[i].position,
          children: [markerInfo[i].children[3], markerInfo[i].children[2]],
          time: markerInfo[i].children[4]
        });
      });

      this.cardata = result;

      console.log("carData", result);

      const MyFirstmarker = result[0].position;  ///marker one

      const MyLastmarker = result[result.length - 1].position;  ///marker two

      console.log("animation start point ", MyFirstmarker);

      console.log("animation last point ", MyLastmarker);


      this.playAnimation();

      this.props.sendAnimationTime(true);


    } else if (prevProps.route !== this.props.route) {


      var markerInfo = this.props.route;

      var bounds = [];
      for (var i in markerInfo) {
        if (markerInfo[i].position[0] != 0 || markerInfo[i].position[1] != 0) {
          bounds.push(markerInfo[i].position);
        }
      }
      this.setState({
        // markers: markerInfo,
        polylines: bounds,
        mapBounds: bounds
      });
    } else if (prevProps.data !== this.props.data) {
      const nearLm = this.props.data;

      var markerPromise = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(this.props.data);
        }, 1500);
      });

      markerPromise.then(markerInfo => {
        var bounds = [];
        var nearLanMark = [];
        for (var i in markerInfo) {
          if (
            markerInfo[i].position[0] != 0 ||
            markerInfo[i].position[1] != 0
          ) {
            bounds.push(markerInfo[i].position);
          }
        }
        if (bounds.length == 0) {
          this.setState({
            markers: markerInfo,
            polylines: [[0, 0], [0, 0]],
            mapBounds: this.state.mapBounds
          });
        } else {
          this.setState({
            markers: markerInfo,
            polylines: [[0, 0], [0, 0]],
            mapBounds: bounds
          });
        }
      });
    }
  }

я хочу, чтобы значения myFirstMarker и MylastMarker отображались в качестве маркера в компоненте карты в начале анимации. Как я могу это сделать?

если понадобится какая-либо иллюстрация, я опишу. Благодарю.