setState 在数组内循环的问题 Next.js

Question

无法找到解决我的问题的方法，它第一次正确循环，但在数组中循环两次后出现错误“TypeError：props.imgData[index] 未定义”。

这是我的代码：

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>
  )
}

Answer 1

为什么 setIndex(0) 而不是 return 0 ？在这种情况下你没有返回任何东西所以你实际上在做 setState(undefined)

Answer 2

根据您的代码，它获取 setIndex 本身来设置函数 when

prev > props.imgData.length -1

尝试 return 0 而不是 setIndex(0)

let next = () => {    
   setIndex(prev => 
      {
      if(prev <props.imgData.length -1 ){
       return   prev +1;
        }
        else {
       return 0;
        }
    } )     
  }

setState 在数组内循环的问题 Next.js

Problem with setState looping inside an array Next.js

javascript

reactjs

next.js