Tengo un componente de procesamiento de eventos de pantalla completa invisible que captura y procesa todos los eventos del mouse. En ciertos eventos, quiero llamar a una función particular en un componente secundario. Creé una variable de estado en el componente principal. Estoy escuchando con efecto de uso en el componente secundario si hay algunos cambios en la variable de estado en el componente principal. Sin embargo, el gancho de efecto se llama a menudo. ¿Hay una mejor manera de hacer esto? En particular, quiero configurar drawing=true con el mouse hacia abajo y drawing=false con el mouse hacia arriba. Si dibujo transiciones de verdadero a falso, quiero guardar algo en la base de datos. Por lo tanto, es importante que la función en useState se llame solo una vez.
Tengo estas dos posibles soluciones.
useUpdateEffect . Aquí hay una guía de uso del paquete de uso de reacciónuseImperativeHandle para ejecutar una función en el elemento secundario desde el elemento principal. ejemplo: import React, { forwardRef, useRef } from 'react'; export default function Parent() { const ref = useRef<Ref>(null!); const handleCallFunction = (): void => ref?.current?.functionInChild(); return ( <div> <button onClick={handleCallFunction}> call a function in child from parent </button> <Child ref={ref} /> </div> ); } type Ref = { functionInChild: () => void; }; type Props = {}; const Child = forwardRef<Ref, Props>((props, ref) => { const functionInChild = () => { console.log('called from parent'); }; React.useImperativeHandle(ref, () => ({ functionInChild })); return <div>Child!</div>; });Tienes que poner esto en tu código.
useEffect(()=>{ /*Query logic*/ console.log('i fire once');},[your_variable]);you_variable que desea cambiar cuando esta variable cambia su valor