No puedo encontrar una manera de resolver mi problema, se repite correctamente la primera vez, pero después de repetir dos veces en la matriz, aparece el error "TypeError: props.imgData[index] no está definido".
Aquí está mi código:
import React, { useEffect } from "react"; import Image from 'next/image'; export default function SimpleSlider(props) { let matchingIdArray = props.imgData.findIndex(element => { return element.id === props.id }) let [index,setIndex] = React.useState(matchingIdArray ) console.log(index) let next = () => { setIndex(prev => { if(prev <props.imgData.length -1 ) { return prev +1 } else { setIndex(0) } } ) } return ( <section className="w-full h-screen mx-auto"> <div onClick={next} className=" w-3/4 mx-auto h-screen "> <Image src={props.imgData[index].urls.raw} width={props.imgData[index].width} height={props.imgData[index].height} quality={100} /> </div> </section> ) }¿Por qué setIndex(0) en lugar de return 0 ? No está devolviendo nada en este caso, por lo que de hecho está haciendo setState(undefined)
de acuerdo con su código, obtiene setIndex para establecer la función cuando
prev > props.imgData.length -1intente devolver 0 en lugar de setIndex (0)
let next = () => { setIndex(prev => { if(prev <props.imgData.length -1 ){ return prev +1; } else { return 0; } } ) }