React HeroCard切换按钮功能异常及索引越界问题求助

问题根源分析 #

你的代码存在几个核心问题：

• 状态更新逻辑错误：使用setActiveIndex时错误地直接引用activeIndex而非更新函数的prev参数，导致异步状态更新时拿到旧值，引发索引计算错误。
• 冗余状态维护：单独维护heroCard状态完全没必要，直接通过activeIndex从cards数组中取值即可，避免状态不同步。
• 按钮禁用状态逻辑混乱：用单一isDisabled状态控制两个按钮，且手动设置禁用状态的时机错误，应该根据当前activeIndex动态判断按钮是否可用。
• 索引越界未提前限制：没有在更新索引前先限制其范围，导致索引可能超出数组边界。

修正后的完整代码 #

import React, { useState } from 'react'
import data from "../data"

const Hero = () => {
    const [cards, setCards] = useState(data.data.pages);
    const [activeIndex, setActiveIndex] = useState(0);

    // 计算左右按钮的禁用状态
    const isPrevDisabled = activeIndex === 0;
    const isNextDisabled = activeIndex === cards.length - 1;

    const addHeroCards = () => {
        // 先判断是否已到最后一项，再更新索引
        if (activeIndex < cards.length - 1) {
            setActiveIndex(prev => prev + 1);
        }
    }

    const subtractHeroCards = () => {
        // 先判断是否已到第一项，再更新索引
        if (activeIndex > 0) {
            setActiveIndex(prev => prev - 1);
        }
    }

    // 直接通过activeIndex获取当前卡片，无需单独维护heroCard状态
    const currentHeroCard = cards[activeIndex];

    return (
        <div className="hero">
            <button className="btn one" onClick={subtractHeroCards} disabled={isPrevDisabled}>&lt;</button>
            <div className="hero-title">
                <h2>{currentHeroCard.title}</h2>
            </div>
            <div className="hero-text">
                <p>{currentHeroCard.document}</p>
            </div>
            <button className="btn two" onClick={addHeroCards} disabled={isNextDisabled}>&gt;</button>
        </div>
    )
}
  
export default Hero;

关键修改点说明 #

• 移除冗余状态：删除heroCard和isDisabled状态，直接通过activeIndex从cards中获取当前卡片，按钮禁用状态通过activeIndex与数组长度动态计算。
• 修复状态更新逻辑：在setActiveIndex中正确使用prev参数（prev => prev + 1），确保拿到最新的索引值进行计算。
• 提前限制索引范围：在更新索引前先判断是否处于边界（比如activeIndex < cards.length -1），从根源避免索引越界。
• 拆分按钮禁用状态：分别为前后按钮设置独立的禁用判断（isPrevDisabled和isNextDisabled），避免两个按钮同时被禁用的问题。

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