Estoy tratando de hacer una pequeña animación con una matriz donde escribe mi nombre como en un símbolo del sistema. Esta es la primera vez que uso ganchos en reaccionar, así que estoy un poco perdido. Me gustaría hacer que el intervalo se detenga en "Felipe García Díaz", pero en lugar de detener el intervalo, solo hace que mi texto desaparezca y continúe ejecutándose en segundo plano. ¿Qué estoy haciendo mal exactamente?
HooksExample.jsx
import React, {useState} from 'react'; import socket from './socket'; function Main(props) { let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"]; let [myName, setName] = useState(introArray); let [climber, setClimber] = useState(0); let block = false; if(block === false) { let climbArray = () => { setClimber(climber += 1); if(climber === introArray.length) { block = true; console.log('dead'); } console.log('live', climber); } setInterval(climbArray, 200); } return ( <React.Fragment> <h1>{myName[climber]}</h1> </React.Fragment> ); } export default Main;Algunos comentarios:
setInterval() y pasarlo a clearInterval()useEffect()useEffect() acceda al último valor del climber , debe estar en la matriz de dependencias como [climber]myName no necesita estar en el estado porque su valor se puede derivar de introArrayintroArray con una cadena por simplicidad, si realmente desea usar una matriz, el JSX correspondiente es <h1>{introArray[climber]}</h1> import React, {useState, useEffect} from 'react'; import "./styles.css"; export default function App() { const intro = "Felipe Garcia_"; const [climber, setClimber] = useState(0); useEffect(()=>{ const interval = setInterval(() => { if (climber === intro.length) { console.log('clearing'); clearInterval(interval); } else { setClimber((val) => val + 1); } }, 200); // clean up interval on unmount return (()=>{ clearInterval(interval); }); }, [climber]); return ( <React.Fragment> <h1> {intro.substring(0, climber)}_ </h1> </React.Fragment> ); }import React, {useState} from 'react'; import socket from './socket'; function Main(props) { let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"]; let interval let [myName, setName] = useState(introArray); let [climber, setClimber] = useState(0); let block = false; if(block === false) { let climbArray = () => { setClimber(climber += 1); if(climber === introArray.length) { block = true; if(interval !== undefined){ clearInterval(interval) } console.log('dead'); } console.log('live', climber); } interval = setInterval(climbArray, 200); } return ( <React.Fragment> <h1>{myName[climber]}</h1> </React.Fragment> ); } export default Main;