en el padre:
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); }} />en el niño:
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();}, }} >Estoy usando React Leaflet para representar un mapa mundial. Estoy tratando de actualizar el estado (objeto de posición) de un marcador arrastrable en el evento dragend.
Cuando dragend se dispara, updatePos también se dispara (como debería) y llama a props.updatePos (como debería).
El problema es este: en el archivo console.log del niño, tengo el objeto de posición del marcador. Este es el comportamiento esperado y correcto. En el componente principal, se llama a la función updateNewPinPos, pero el parámetro pos es un objeto vacío. Esto sucede aunque estoy llamando a la función con el objeto marker._latlang. ¿Por qué está pasando esto? ¿Cómo se "pierde" este objeto entre el niño y el padre?
Soy bastante nuevo para reaccionar, así que me disculpo si esto es bastante básico, pero estoy luchando mucho con esto. Puedo proporcionar más información si es necesario.
No está utilizando la matriz de dependencias de useCallback
El segundo parámetro del useCallback es su matriz de dependencias, y debe poner allí cualquier cosa que esté usando dentro de la función useCallback . React almacenará en caché su función siempre que las dependencias sean las mismas.
Aconsejaría no usar useCallback en este caso. Pero si todavía quieres, deberías hacerlo así:
const updatePosition = useCallback(() => { const marker = markerRef.current; props.updatePos(marker._latlng); }, [props.updatePos]);También en su componente principal, debe usar los parámetros dados, o simplemente pasar la función tal como está, así:
<Draggable draggable={draggable} newPinPosition={newPinPosition} setCenterPos={() => { getCurrentCenter(map); }} updatePos={updateNewPinPos} />