Reactjs 在谷歌地图中拖动标记后，如何进行多段线更新？

我有一个谷歌地图问题，当我把一个标记拖到另一个地方时，我试图更新我的多段线。我使用标记器中的onDragEnd道具来处理此函数以进行更新。问题是当我拖动标记时，多段线不会立即更新

第一个问题是，当我更改markersPosition状态（const[markers，setMarkers]=useState（[]）时，不会发生重新渲染。为此，我设置了一个触发器状态，这可能不是最佳解决方案，但至少我进行了重新渲染

第二个也是最重要的是，我的多段线组件正在使用更新状态重新渲染，但路径没有更新。我认为该组件在状态更改之前正在渲染，但我不确定

有人能帮我吗？ 这是我正在编写的代码

import React, { useState, useMemo, useCallback, useRef } from 'react'
import { GoogleMap, Marker, useJsApiLoader, Polyline, InfoWindow } from '@react-google-maps/api';

const containerStyle = {
  width: '100%',
  height: '350px'
};

const center = {
  lat: -23.324812,
  lng: -51.17694
};



const MapComponent = () => {
  //component that receive all coordinates
  const [markers, setMarkers] = useState([])

  const [selected, setSelected] = useState(null)
  const [triggerState, setTriggerState] = useState(false)
  const { isLoaded, loadError } = useJsApiLoader({
    googleMapsApiKey: process.env.REACT_APP_GOOGLE_MAPS_API_KEY,
  })


// function that renders polyline
// _____ HERE IS THE ISSUE____

  const polylineComponent = useMemo(() => {
    console.log('Poly Re-render')
     //********It's returning the updated marker!********
    console.log(markers)

     //****** BUT THE POLYLINE DOESN'T GET THE UPDATED MARKER*****
    return (
      <div>
        <Polyline
          strokeColor={"#FF0000"}
          strokeWeight={3}
          path={markers}
          geodesic={false}
        />
      </div>)
  }, [markers, triggerState])


// function that handle event when the drag is finished

  const handleDragEnd = useCallback((event, marker) => {
    let lat = event.latLng.lat()
    let lng = event.latLng.lng()
    const newMarkerState = markers
    newMarkerState[marker.id - 1] = { id: marker.id, lat: lat, lng: lng }

    setMarkers(newMarkerState)
    //i put this triggerState cause i don't know why the setMarker is not creating a re-render.
    setTriggerState(!triggerState)
  }, [markers, triggerState])


  // function that renders markers

  const markersPositions = useMemo(() => {
    console.log('Re-render')
    return (
      <div>
        {markers.map((markers, index) => (
          <Marker
            onDragEnd={(event) => handleDragEnd(event, markers)}
            draggable={true}
            key={index}
            position={{ lat: markers.lat, lng: markers.lng }}
            icon={{
              url: "/logo192.png",
              scaledSize: new window.google.maps.Size(30, 30),
              origin: new window.google.maps.Point(0, 0),
              anchor: new window.google.maps.Point(15, 15),
            }}
            onClick={() => { setSelected(markers) }}
          >
          </Marker>
        ))}
      </div>)
  }, [handleDragEnd, markers])


  // function that put markers

  const handlePutMarkers = useCallback((event) => {
    let id;
    if (markers.length === 0) {
      id = 1
    } else {
      id = markers[markers.length - 1].id + 1
    }
    let lat = event.latLng.lat()
    let lng = event.latLng.lng()
    setMarkers((current) => [...current, { id: id, lat: lat, lng: lng }])
  }, [markers])

  const onMapLoad = useCallback((map) => {
    mapRef.current = map
  }, [])


  const reCentralize = useCallback(() => {
    let bounds = new window.google.maps.LatLngBounds();
    let i;
    for (i = 0; i < markers.length; i++) {
      bounds.extend({ lat: markers[i].lat, lng: markers[i].lng });
    }
    mapRef.current.fitBounds(bounds);
  }, [markers])

  const mapRef = useRef(null)

  if (loadError) { return ("error Loading maps") }
  if (!isLoaded) { return ("Loading..") }

  return (
    <div>
      <button onClick={() => reCentralize()}>Center</button>
      <GoogleMap
        ref={mapRef}
        mapTypeId={"satellite"}
        mapContainerStyle={containerStyle}
        zoom={12}
        center={center}
        onLoad={onMapLoad}
        onClick={handlePutMarkers}
      >
        {markersPositions}

        {selected ? (<InfoWindow
          position={{ lat: selected.lat, lng: selected.lng }}
          onCloseClick={() => setSelected(null)}>
          <div>{selected.lat} / {selected.lng}</div>
        </InfoWindow>) : null}

        {polylineComponent}
      </GoogleMap>
    </div >
  )
}

export default MapComponent

import React，{useState，usemo，useCallback，useRef}从'React'导入
从'@react google maps/api'导入{GoogleMap，Marker，useJsApiLoader，Polyline，InfoWindow}；
常量集装箱样式={
宽度：“100%”，
高度：'350px'
};
常数中心={
lat:-23.324812，
液化天然气：-51.17694
};
常量映射组件=（）=>{
//接收所有坐标的组件
常量[markers，setMarkers]=useState（[]）
const[selected，setSelected]=useState（null）
常量[triggerState，setTriggerState]=useState（false）
const{isLoaded，loadError}=useJsApiLoader({
googleMapsApiKey:process.env.REACT\u APP\u GOOGLE\u MAPS\u API\u KEY，
})
//渲染多段线的函数
//这就是问题所在____
const polylineComponent=useMoom（（）=>{
console.log（'Poly-Re-render'）
//********它正在返回更新的标记********
控制台日志（标记）
//******但是多段线没有得到更新的标记*****
返回(
)
}，[markers，triggerState]）
//完成拖动时处理事件的函数
const handleDragEnd=useCallback（（事件、标记）=>{
设lat=event.latLng.lat（）
设lng=event.latLng.lng（）
常量newMarkerState=标记
newMarkerState[marker.id-1]={id:marker.id，lat:lat，lng:lng}
设置标记（新标记状态）
//我之所以使用这个触发器状态，是因为我不知道setMarker为什么不创建重新渲染。
setTriggerState（！triggerState）
}，[markers，triggerState]）
//渲染标记的函数
常量标记位置=使用备注（（）=>{
console.log（'Re-render'）
返回(
{markers.map（（markers，index）=>(
handleDragEnd（事件、标记）}
draggable={true}
键={index}
位置={lat:markers.lat，lng:markers.lng}
图标={{
url:“/logo192.png”，
scaledSize:newwindow.google.maps.Size（30,30），
来源：newwindow.google.maps.Point（0,0），
锚：新窗口。谷歌。地图。点（15，15），
}}
onClick={（）=>{setSelected（markers）}
>
))}
)
}，[handleDragEnd，markers]）
//放置标记的函数
const handleputmarks=useCallback（（事件）=>{
让我看看你的身份证；
如果（markers.length==0）{
id=1
}否则{
id=markers[markers.length-1].id+1
}
设lat=event.latLng.lat（）
设lng=event.latLng.lng（）
设置标记（（当前）=>[…当前，{id:id，lat:lat，lng:lng}]）
}[标记]）
const onMapLoad=useCallback（（map）=>{
mapRef.current=map
}, [])
const reCentralize=useCallback（（）=>{
让bounds=newwindow.google.maps.LatLngBounds（）；
让我；
对于（i=0；i居中
{markersPositions}
{已选择？（设置已选择（空）}>
{selected.lat}/{selected.lng}
)：null}
{polylineComponent}
)
}
导出默认映射组件

到目前为止，您能否提供您的代码的详细信息？您可以使用。