¿Alguien puede decirme por qué al hacer clic en el botón, el valor que se envía a la consola siempre es una unidad más pequeña que la que se muestra en la pantalla? Los valores no están sincronizados como se esperaba.
Ejemplo a continuación en React
En Niño:
import React, {useState } from "react"; export const ChildComp = ({getNumProps}) => { const [num, setNum] = useState(0); const onPlusClick = () => { if (num< 12) { setNum(num + 1);// num does not increase immediately after this line, except when focus reenters here on second method call } getNumProps(num); } return( <div> <button onClick={onPlusClick}> Click to increment </button> {num} </div> ); }en padre
import { ChildComp } from "./ChildComp" export const ParentComp = () => { const getNum= (num) => { console.log(num); } return (<ChildComp getNumProps={getNum}/>) }La página inicialmente muestra 0
Agradecería si puede dejar un comentario sobre cómo se puede mejorar la pregunta.
Este es un ejemplo de comunicación entre padres e hijos. Además, cualquier objeción sobre los estándares utilizados, hágamelo saber.
Gracias.
Actualización: me doy cuenta de que los valores estarían sincronizados si en lugar de getNumProps(num); Hice getNumProps(num + 1); pero eso no cambia el hecho de que previamente en esta línea setNum(num + 1); , como ya se señaló en el comentario, num no aumenta inmediatamente después de esta línea, excepto cuando el foco vuelve a ingresar aquí en la segunda llamada al método. No estoy seguro de por qué.
La función prop getNumProps es un efecto secundario y debe colocarse en un gancho, en lugar de dentro de esa función onPlusClick .
En su lugar, haz esto:
useEffect(() => { getNumProp(num); }, [num]); Alternativamente, para evitar el error: "React Hook useEffect has a missing dependency: 'getNumProps'. Consulte este documento sobre el uso del gancho useCallback
const callback = useCallback(() => { getNumProp(num); }, [num]); function onPlusClick(...) { ... callback(); } El cambio al estado de num provocará una nueva representación del componente secundario, no del principal.