我在 React child 组件中的函数参数没有传递给 parent 组件的函数。为什么会这样？

Question

在parent中：

 const [newPinPosition, setNewPinPosition] = React.useState({ lat: 0 , lng: 0 });
 const updateNewPinPos = (pos) => {
   console.log(pos);
   setNewPinPosition({ lat: pos.lat, lng: pos.lng });
  };

  // in the render method of the parent react component
  <Draggable
     draggable={draggable} 
     newPinPosition={newPinPosition}   
     setCenterPos={() => { getCurrentCenter(map); }}
     updatePos={() => { updateNewPinPos(newPinPosition); }}
   />

在child中：

const updatePosition = useCallback(() => {
const marker = markerRef.current;
// console.log(`marker._latlng : ${marker._latlng}`);
props.updatePos(marker._latlng);
});

<StyledMarker   
   position={props.newPinPosition}
   draggable={props.draggable}
   ref={markerRef}
   eventHandlers={{
      dragend: () => {updatePosition();},
      }}
 >

我正在使用 React Leaflet 渲染世界地图。我正在尝试更新 dragend 事件上可拖动标记的状态（位置 object）。

当 dragend 触发时，updatePos 也会触发（它应该）并调用 props.updatePos（它应该）。

问题是这样的：在 child 的 console.log 中，我有标记的 object 位置。这是预期的正确行为。在 parent 组件中，正在调用 updateNewPinPos 函数，但 pos 参数为空 object。即使我使用 marker._latlang object 调用该函数，也会发生这种情况。为什么会这样？ object 是如何在 child 和 parent 之间“丢失”的？

我对反应很陌生，所以如果这是非常基本的，我深表歉意，但我为此苦苦挣扎。如有必要，我可以提供更多信息。

Answer 1

您没有使用 useCallback

的依赖数组

useCallback 钩子的第二个参数是它的依赖数组，你应该把你在 useCallback 函数中使用的任何东西放在那里。只要依赖相同，React 就会缓存你的函数。

我建议在这种情况下不要使用 useCallback。但如果你仍然想要，你应该这样做：

const updatePosition = useCallback(() => {
  const marker = markerRef.current;
  props.updatePos(marker._latlng);
}, [props.updatePos]);

同样在你的父组件中，你应该使用给定的参数，或者直接传递函数，像这样：

 <Draggable
     draggable={draggable} 
     newPinPosition={newPinPosition}   
     setCenterPos={() => { getCurrentCenter(map); }}
     updatePos={updateNewPinPos}
   />

我在 React child 组件中的函数参数没有传递给 parent 组件的函数。为什么会这样？

Parameters of my function in React child component are not being passed to the parent component's function. Why is this happening?

javascript

reactjs

react-hooks

leaflet

react-leaflet