React Hooks：useState updater 函数：为什么这个钩子会在拖动时删除对象？

Question

我在地图上有一个标记，它在拖动时具有此功能：

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

该函数触发另一个函数 updateUserMarker，该函数通过上下文来自组件：

它使用索引，一个包含来自 event 的更新 lat 和 long 的新对象，并附加一个也将来自事件的 id .

在上下文组件中，我有这个功能：

 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)
          }
        ]
      });
    },

它适用于第一个对象——纬度和经度，但在拖动开始后添加第二个对象时它就消失了！

可能几个小时前就应该尝试来这里，但我想尽我最大的努力！

提前致谢！

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]
  });
}

React Hooks：useState updater 函数：为什么这个钩子会在拖动时删除对象？

React Hooks: useState updater function: Why does this hook remove the object upon drag?

javascript

react-context

react-hooks