Tengo tres páginas para mostrar haciendo clic en el botón Siguiente y Atrás y, de forma predeterminada, se mostrará la primera página (Daño externo) y al hacer clic en SIGUIENTE se mostrará la segunda página y el botón ATRÁS llevará a la última página, pero no se actualiza. el estado ? Necesito usar el estado para actualizar el conteo del índice de la matriz, pero no está actualizando el índice.
/* eslint-disable consistent-return */ import React, { useState } from 'react'; // import classnames from 'classnames'; import ScreenDamage from './ScreenDamage'; import Battery from './Battery'; import ExternalDamage from './ExternalDamage'; import Footer from './Footer'; import styles from './manualCheck.module.scss'; import VerticalSpacing from '../../core/VerticalSpacing/VerticalSpacing'; // import AdditionalChecks from './AdditionalChecks' const ManualCheck = () => { const [index, setIndex] = useState(0); const item = [ <ExternalDamage />, <ScreenDamage />, <Battery />, ]; const handleBackButton = () => { if (index !== 0) { setIndex(index - 1); console.log(index); } }; const handleNextButton = () => { setIndex(index + 1); console.log(index); }; return ( <div> {item[index]} <div className={styles.footer}> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing2x} /> {/* eslint-disable jsx-a11y/anchor-is-valid */} <a href="#" onClick={() => handleBackButton()} > Back </a> {/* eslint-enable jsx-a11y/anchor-is-valid */} {/* eslint-disable jsx-a11y/anchor-is-valid */} <a href="#" onClick={() => handleNextButton()} > Next </a> {/* eslint-enable jsx-a11y/anchor-is-valid */} </div> <VerticalSpacing size={ABLE_SPACING_SIZE.spacing15x} /> </div> ); }; export default ManualCheck;Debe agregar un e.preventDefault() en handleBackButton() y handleNextButton() como tal:
const handleBackButton = (e) => { e.preventDefault(); if (index !== 0) { setIndex(index - 1); console.log(index); } }; const handleNextButton = (e) => { e.preventDefault(); setIndex(index + 1); console.log(index); };El siguiente enlace podría ayudarte en tu búsqueda:
Bueno, su código se puede mejorar de la siguiente manera:
Primero, no está pasando ningún argumento a las funciones, por lo que debe usar onClick de la siguiente manera:
<a href="#" onClick={handleBackButton}> Back </a> <a href="#" onClick={handleNextButton} > Next </a>También su estado depende del estado anterior. Por lo tanto, para asegurarse de obtener las últimas instantáneas, debe actualizar su estado de la siguiente manera:
const handleBackButton = (e) => { e.preventDefault(); if (index !== 0) { setIndex(prevIndex => prevIndex - 1); console.log(index); } }; const handleNextButton = (e) => { e.preventDefault(); setIndex(prevIndex => prevIndex + 1); console.log(index); };