Я получаю URL-адреса изображений из API
const [images, setImages] = useState([]);
const loadedImagesCounter = useRef(0);
const imagesCounter = useRef(null);
useEffect(() => {
const fetchImages = async () => {
try {
const response = await request({
url: 'http://localhost:5000/image/get-images',
params: { category }
});
setImages(response);
imagesCounter.current = response.length;
} catch {}
};
fetchImages();
}, [setImages, category]);
Каждое изображение имеет onLoad
с шагом loadedImagesCounter
{images.map((img, index) => {
return (
<li key={index} className="admin-images__item">
<img
onLoad={() => {
loadedImagesCounter.current++;
}}
className="admin-images__img"
src={`http://localhost:5000/${img}`}
/>
</li>
);
})}
Почему <Spinner />
компонент go бесконечно?
{loadedImagesCounter.current !== imagesCounter.current && <Spinner />}