React开发中如何解决数组索引循环时条件不满足返回undefined问题

• JavaScript数组的有效索引范围是0 ~ 数组长度 - 1，你的现有代码存在两个逻辑错误：
  1. 判断条件边界错误：index <= itemsLength的判断会允许index增加到等于甚至超过数组长度，这些值都不属于有效索引范围，访问items[index]自然返回undefined
  2. 重置逻辑触发时机错误：只有当index大于数组长度时才会触发重置为0，这就导致中间会出现多次无效索引，需要多点几次才能回到0

方案1：调整判断分支逻辑 #

把判断条件改为仅当当前索引未到数组最后一位时才自增，否则直接重置为0：

const [index, setIndex] = useState(0);
const itemsLength = items.length;

const nextBtn = () => {
    if(index < itemsLength - 1) {
        setIndex(index + 1);
    } else {
        setIndex(0);
    }
}

方案2：取模运算简化实现 #

如果不需要写分支判断，可以用取模运算一行实现循环效果，同时建议使用setState的函数式更新写法，避免状态批处理导致的旧值引用问题，更稳妥：

const nextBtn = () => {
    setIndex(prevIndex => (prevIndex + 1) % itemsLength);
}

两种方案最终的索引变化逻辑都是：假设数组长度为3，索引会按0→1→2→0→1循环，不会出现超出有效范围的索引，不会返回undefined。

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