Next.js setState循环数组报props.imgData[index]未定义错误

错误出在next函数的状态更新逻辑：当索引走到数组最后一位时，setIndex的回调函数没有返回合法的索引值，反而嵌套调用了setIndex(0)，导致index被更新为undefined，最终读取数组元素时报错。

• 组件初始化时通过findIndex拿到匹配id的初始下标，前序点击触发的状态更新走if分支，每次正常返回prev+1，功能表现正常
• 当索引值等于props.imgData.length - 1（数组最后一位）时，点击切换进入else分支
• 该分支内没有给当前状态更新回调返回有效值，仅嵌套调用了setIndex(0)，当前次状态更新的返回值为undefined
• 状态更新触发重渲染时，index值为undefined，执行props.imgData[index]相当于读取props.imgData[undefined]，直接抛出「TypeError: props.imgData[index] is undefined」错误

修改next函数的状态更新逻辑，边界场景下直接在回调内返回0即可，不需要嵌套调用setIndex。同时补充两层兜底：一是findIndex未匹配到对应id（返回-1）时默认从0开始；二是当前索引对应的数据不存在时中断渲染，避免偶发异常。
修复后的完整代码：

import React from "react";
import Image from 'next/image';

export default function SimpleSlider(props) {
  // 未匹配到id时默认从索引0开始
  const matchIndex = props.imgData.findIndex(element => element.id === props.id);
  const initIndex = matchIndex < 0 ? 0 : matchIndex;
  const [index, setIndex] = React.useState(initIndex);

  const next = () => {    
    setIndex(prev => {
      if(prev < props.imgData.length - 1) {
        return prev + 1      
      } else {
        // 函数式更新直接返回新状态，不要嵌套调用setState
        return 0
      }
    })     
  } 

  const currentImg = props.imgData[index];
  // 当前图片不存在时不渲染内容，避免报错
  if (!currentImg) return null;

  return (
    <section className="w-full h-screen mx-auto">
      <div onClick={next} className="w-3/4 mx-auto h-screen">      
        <Image 
          src={currentImg.urls.raw} 
          width={currentImg.width} 
          height={currentImg.height} 
          quality={100}  
        /> 
      </div>
    </section>
  )
}

注意：React的函数式状态更新回调，必须同步返回新的状态值，不要在回调内部再次调用同名setState，很容易出现状态不一致、返回值为undefined的问题。

内容的提问来源于stack exchange，提问作者Mehdi596