React Hooks: useState updater function: 為什么這個鈎子在拖動時會刪除 object？

Question

我在 map 上有一個標記，它在拖動時使用這個 function：

  function handleOnDragEndUpdateMarker(e) {
    var markerIndex = e.target.options.marker_index;
    var markerLatLng = e.target.getLatLng(); //get marker LatLng
    markerLatLng.id = markerIndex;
    updateUserMarker(markerLatLng, markerIndex);
  }

那個 function 觸發另一個 function updateUserMarker ，它來自一個組件通過上下文：

它使用索引，一個新的 object 包含來自event的更新的lat和long ，並附加一個也將來自事件的id 。

在上下文組件中，我有這個 function：

 updateUserMarker: (marker, markerIndex) => {
      console.log('marker, markerIndex ', marker, markerIndex);

      let updatedMarker = user.markers.map(element =>
        element.id == markerIndex ? { ...element, ...marker } : element
      )[0];

      console.log(
        'user.markers[markerIndex] updatedMarker ',
        user.markers[markerIndex],
        updatedMarker
      );
      setUser({
        ...user,
        markers: [
          {
            ...user.markers[markerIndex],
            ...(user.markers[markerIndex] = updatedMarker)
          }
        ]
      });
    },

它適用於第一個對象 - lat 和 lang，但是在拖動開始后添加第二個 object 后它消失了！

可能應該在幾個小時前嘗試來這里，但想盡我最大的努力！

先感謝您！

Answer 1

我不確定您為什么將[0]用於updatedMarker 。 我假設您要更新其 id 與 markerIndex 匹配的標記。

updateUserMarker: (marker, markerIndex) => {
  let updatedMarkers = user.markers.map(element =>
    element.id == markerIndex ? { ...element, ...marker } : element
  );
  
  setUser({
    ...user,
    markers: [...updatedMarkers]
  });
}