Javascript 显示相同图像时加载字符串闪烁

我有一个小问题。我有一个滑块，显示Github用户的化身。我必须在加载图像时动态地（获取api）加载字符串。我有两个按钮“下一个”和“上一个”。我有一个用户名数组。 我点击下一步，它将获取新用户并显示该用户的头像。下一个用户需要另一个获取。同时还有正在加载的文本。一切都正常，但当我快速按下下一步或上一步按钮时，加载字符串会随着图像闪烁。比如说，显示阿凡达是如此之快，以至于在1毫秒的时间里，我同时拥有加载字符串。我知道，在第一次获取用户数据后，我下载了他/她的化身，下一次从缓存中获取化身。我的代码如下：

import React, { useState, useEffect } from 'react';
import regeneratorRuntime from 'regenerator-runtime';

import './slider.scss';


const Slider = ({ slides }) => {
    if (!Array.isArray(slides) || slides.length <= 0) {
        return null;
    }

const [curr, setCurr] = useState(1);
const [user, setUser] = useState(slides[0].user);
const [avatar, setAvatar] = useState("");
const [isError, setIsError] = useState(false);
const [isLoading, setIsLoading] = useState(false);

const goToNext = () => {
    setCurr(curr === slides.length ? 0 : curr + 1);
    setUser(slides[curr].user);
}

const goToPrev = () => {
    setCurr(curr === 0 ? slides.length - 1 : curr - 1);
    setUser(slides[curr].user);
}

useEffect(() => {

    const fetchData = async () => {

        setIsError(false);
        setIsLoading(true);

        try {
            const response = await fetch(`https://api.github.com/users/${user}`);
            const data = await response.json();
            if (data.message) {
                setIsError(true);
            } else {
                setData(data);
                
            }

        } catch (error) {
            setIsError(true);
            console.log(`Error ${error}`)
        }

        setIsLoading(false);
    }

    fetchData();

}, [user]);

const setData = ({ avatar_url }) => {
    setAvatar(avatar_url);
}

function checkError() {
    if (isError) {
        return ("");
    } else return (avatar);
}

return (
    <section className="slider">
        <h2 className="header">{user}</h2>
        <div className="slider__container">
            {isError && <span className="slider__error">Something went wrong...</span>}
            {isLoading ? (
                <span className="slider__loading">Loading...</span>
            ) : (
                    <img className="image" src={checkError()} />
                )}
        </div>
        <button className="buttonPrev" onClick={goToPrev}>Previous</button>
        <button className="buttonNext" onClick={goToNext}>Next</button>
    </section>
);

import React，{useState，useffect}来自“React”；
从“再生器运行时”导入再生器运行时；
导入“/slider.scss”；
常量滑块=（{slides}）=>{
如果（！Array.isArray（slides）| | slides.length{
setCurr（curr==slides.length？0:curr+1）；
设置用户（幻灯片[curr].user）；
}
康斯特戈托普雷夫=（）=>{
setCurr（curr==0？slides.length-1:curr-1）；
设置用户（幻灯片[curr].user）；
}
useffect（（）=>{
const fetchData=async（）=>{
setIsError（假）；
设置加载（真）；
试一试{
const response=等待获取(`https://api.github.com/users/${user}`）；
const data=wait response.json（）；
if（data.message）{
setIsError（真）；
}否则{
setData（数据）；
}
}捕获（错误）{
setIsError（真）；
log（`Error${Error}`）
}
设置加载（假）；
}
fetchData（）；
}，[用户]；
const setData=（{avatar\u url}）=>{
setAvatar（avatar_url）；
}
函数checkError（）{
如果（isError）{
返回（“”）；
}否则返回（化身）；
}
返回(
{user}
{isError&&出了点问题…}
{孤岛加载(
加载。。。
) : (
)}
以前的
下一个
);

}

导出默认滑块