Intentando incrementar automáticamente el índice de mi declaración de cambio para que mi sitio cambie automáticamente diferentes elementos.
Tratando de lograr esto usando:
export default function MainComponent(props) { let index = 0; switch (index) { case 0: counter++; console.log(index) return ( //ELEMENT 1 ); case 1: index++; console.log(index) return ( //ELEMENT 2 ); case 2: index++; console.log(index) return ( ELEMENT 3 ); case 3: index++; console.log(index) return ( //ELEMENT 4 ); default: return ( null )Puedo ver que el índice aumenta en la consola, así que no entiendo por qué mi estado de cambio no cambia al siguiente elemento.
Cualquier ayuda apreciada
Si te entiendo correctamente, necesitas usar ganchos para el estado. De lo contrario, React no volverá a renderizar su componente.
import { useCallback, useState } from "react"; export default function App() { let [index, setIndex] = useState(0) let increment = useCallback(() => { setIndex(index => index + 1); }, [setIndex]) switch (index) { case 0: increment() console.log(index) return 1 case 1: increment() console.log(index) return 2 case 2: increment() console.log(index) return 3 case 3: increment() console.log(index) return 4 default: return 'default' } }Pero los renderizados suceden rápidamente. Necesitará algunos tiempos de espera para ver diferentes casos en la pantalla