Как заставить маркеры листовок обновляться из-за изменения параметров? - PullRequest
Новая
       37

Как заставить маркеры листовок обновляться из-за изменения параметров?

0 голосов
/ 25 мая 2020

У меня на карте несколько строк, которые отрисовываются массивом из состояния. Затем я снова прохожу по массиву и получаю маркеры-вершины, передавая им индекс строки (lineIndex) и их индекс в массиве строк (vertexIndex). 

getLines = () => {
    const { linesData } = this.state;
    return linesData && linesData.length ?
      linesData.map((line, i) => {
        return <Polyline
          key={hash(i)}
          positions={line.map(vertex => vertex.map(coordinate => +coordinate))}
          color={'#3f51b5'}
          weight={5}
          onClick={this.lineOnClick}
          lineIndex={i}
        />;
      })
      : null;
  }

И вершины. 

getLineVertices = () => {
    const { linesData, selectedVertex } = this.state;
    const { isEditing } = this.props;
    const verticesData = getLineVertices(linesData);
    return verticesData && verticesData.length && isEditing ?
      verticesData.map((vertex, i) => {
        return <Marker
          key={hash(i)}
          position={vertex.coordinates}
          draggable={true}
          icon={isVertexSelectedCheck(selectedVertex, vertex) ? vertexIconSelected : vertexIcon}
          lineIndex={vertex.lineIndex}
          vertexIndex={vertex.vertexIndex}
          onDrag={this.vertexDrag}
          onClick={this.selectVertex}
        />;
      })
      : null;
  }

Затем я добавляю точку, щелкнув строку 

  lineOnClick = (event) => {
    let { selectedLine, creatingNewVertices } = this.state;
    const { isEditing } = this.props;
    if (isEditing) {
      if (!creatingNewVertices) {
        this.addVertex(event);
      } else {
        const newSelectedLine = { lineIndex: event.target.options.lineIndex };
        this.setState({ selectedLine: newSelectedLine });
      }
    }
  }

Когда я добавляю новую вершину, я обновляю массив linesData в состоянии, новая вершина отображается и получает индекс в опциях, но другие маркеры не пересчитали свои индексы (lineIndex, vertexIndex)! Поэтому, когда я хочу перетащить вершину на одну строку, она перетаскивает вершину на другую строку. 

  vertexDrag = (event) => {
    const { linesData } = this.state;
    const newVertexLatLng = Object.values(event.target._latlng);
    const lineIndex = event.target.options.lineIndex;
    const vertexIndex = event.target.options.vertexIndex;
    const newLinesData = [...linesData];
    newLinesData[lineIndex][vertexIndex] = newVertexLatLng;
    this.setState({ linesData: newLinesData });
  };

Надеюсь, я достаточно ясно объяснил. Как я могу исправить такое поведение?

...