Entonces, como parte de aprender a reaccionar, actualmente estoy convirtiendo una aplicación basada en clases en una funcional. He encontrado algunos problemas con mi código ya que no puedo usar la función de devolución de llamada en el siguiente contexto:
class ColorBox extends Component { constructor(props) { super(props); this.state = { copied: false }; this.changeCopyState = this.changeCopyState.bind(this); } changeCopyState() { this.setState({ copied: true }, () => { **setTimeout(() => this.setState({ copied: false }), 1500);** }); }Intenté cambiarlo usando el gancho useEffect, a lo siguiente:
function ColorBox(props) { const [isCopied, setIsCopied] = useState(false) useEffect(() => setTimeout(() => setIsCopied(false), 1500), [isCopied]) const changeCopyState = () => { setIsCopied(true) };pero el problema es que useEffect se procesa en el primer procesamiento, lo que hace que la aplicación falle si no espero 1500 ms antes de hacer clic en el botón Copiar.
¡Cualquier ayuda sería muy apreciada!
los efectos se activarán cada vez que cambien los valores de sus dependencias. Sin embargo, lo que desea de acuerdo con su enfoque basado en clases es, después de establecer isCopied en true , establecerlo en false después de 1500 ms.
Para hacerlo, verifique el valor actual de isCopied en su efecto antes de activar el tiempo de espera.
function ColorBox(props) { const [isCopied, setIsCopied] = useState(false) useEffect(() => { if (isCopied) { setTimeout(() => setIsCopied(false), 1500) } }, [isCopied, setIsCopied]) const changeCopyState = () => { setIsCopied(true) }; } Además de eso, por coherencia, es posible que desee utilizar clearTimeout al desmontar su efecto (para evitar, por ejemplo, llamar a setIsCopied después de que el componente se haya desmontado).
Para hacerlo, el efecto tiene que ser así.
useEffect(() => { if (isCopied) { let timeoutId = setTimeout(() => setIsCopied(false), 1500) return () => clearTimeout(timeout) } }, [isCopied, setIsCopied])Cuando no especifica llaves {} en la función de flecha, devolverá un valor.
En useEffect no necesita que se devuelva un valor (la única excepción es el método de ciclo de vida componentWillUnmount ). Eso condujo a un comportamiento impredecible y el tiempo de espera se disparó en el renderizado inicial.
Use llaves {} en su función de flecha useEffect en su lugar
useEffect(() => { setTimeout(() => setIsCopied(false),1500) }, [isCopied]);