React中点击Previous按钮时索引无法更新问题排查

你的代码里有两个关键问题导致Previous按钮无效：

1. fetchUsers每次获取新用户时，用setUsers([新用户对象])直接替换了整个用户数组，导致users数组永远只有1个元素，长度始终为1。
2. currentIndex初始值是0，handlePrevious的逻辑是Math.max(prevIndex - 1, 0)——当索引已经是0时，计算结果还是0，状态没有变化，页面自然无反应。

顺带说下：你觉得Next按钮能正常更新，其实不是索引变化导致的，而是每次点击Next都会调用fetchUsers替换掉数组里的唯一元素，看起来像是切换了用户而已。

1. 修改用户数组更新逻辑，追加而非替换 #

把fetchUsers里的setUsers改成函数式更新，基于原数组追加新用户：

const fetchUsers = () => {
    fetch('https://randomuser.me/api/')
        .then(res => res.json())
        .then(data => {
            const { results: userList } = data;
            const {
                name: { first, last },
                picture: { thumbnail }
            } = userList[0];
            const newUser = { name: `${first} ${last}`, picture: thumbnail };
            
            // 基于之前的用户数组追加新用户
            setUsers(prevUsers => [...prevUsers, newUser]);
            setIsLoading(false);
        })
        .catch(error => {
            console.error('Error fetching data:', error);
        });
}

2. 修正Next按钮的索引更新逻辑 #

点击Next时，应该在新增用户后自动切换到最新用户，直接在fetchUsers的成功回调里更新索引：

.then(data => {
    // ...提取用户信息，创建newUser
    setUsers(prevUsers => {
        const updatedUsers = [...prevUsers, newUser];
        // 把索引设置为新数组的最后一个元素
        setCurrentIndex(updatedUsers.length - 1);
        return updatedUsers;
    });
    setIsLoading(false);
})

3. 保留原有Previous按钮逻辑即可 #

现在users数组会逐渐积累用户，handlePrevious里的Math.max(prevIndex - 1, 0)就能正常工作：当索引大于0时，点击Previous会减1；当索引已经是0时，保持0不变（避免出现负索引）。

可以给Previous按钮添加禁用状态，当索引为0时灰掉按钮，提升用户体验：

<button onClick={handlePrevious} disabled={currentIndex === 0}>Previous</button>

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