装载机卡住了

Question

所以我正在使用 React 构建 SPA 并从 API 获取一些图像。我想显示一个加载程序，直到我得到响应。我这里有代码，但加载器由于某种原因似乎没有旋转。我不知道为什么。我正在使用 axios 来获取 API。我有以下组件的代码。

photogallery.js

/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable jsx-a11y/img-redundant-alt */
import React, { useState, useEffect } from "react";
import "./PhotoGallery.css";
import ImageModal from "./ImageModal";
import Loader from "./Loader";
import axios from "axios";

const PhotoGallery = () => {
  const [isLoading, setIsLoading] = useState(false);

  const [photos, setPhotos] = useState([]);
  const [selectedPhoto, setSelectedPhoto] = useState(null);

  const headers = {
    Authorization: "my_key",
  };

  const fetchApi = async () => {
    setIsLoading(true);
    await axios
      .get("https://api.pexels.com/v1/curated", { headers })
      .then(({ data }) => {
        const photoUrls = data.photos.map((photo) => photo.src.original);
        setPhotos(photoUrls);
      });
    setIsLoading(false);
  };

  useEffect(() => {
    fetchApi();
  }, []);

  const handlePhotoClick = (photo) => {
    setSelectedPhoto(photo);
  };

  const handleCloseModal = () => {
    setSelectedPhoto(null);
  };

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : (
        <div className="photo-gallery">
          {photos.map((photo, index) => (
            <div
              className="photo"
              key={index}
              onClick={() => handlePhotoClick(photo)}
            >
              <img src={photo} alt={`Photo ${index + 1}`} />
            </div>
          ))}
          {selectedPhoto && (
            <ImageModal photo={selectedPhoto} onClose={handleCloseModal} />
          )}
        </div>
      )}
    </>
  );
};

export default PhotoGallery;

Loader.js

import React from "react";
import "./Loader.css";

const Loader = () => {
  return <div className="loader"></div>;
};

export default Loader;

加载器.css

.loader {
    border: 4px solid rgba(0, 0, 0, 0.1);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border-left-color: #09f;
    animation: spin 1s linear infinite;
    
  }
  
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

Answer 1

你的三元有问题吗？

const PhotoGallery = () => {
  const [isLoading, setIsLoading] = useState(false);

  const [photos, setPhotos] = useState([]);
  const [selectedPhoto, setSelectedPhoto] = useState(null);

  const headers = {
    Authorization: "my_key",
  };

  const fetchApi = async () => {
    setIsLoading(true);
    await axios
      .get("https://api.pexels.com/v1/curated", { headers })
      .then(({ data }) => {
        const photoUrls = data.photos.map((photo) => photo.src.original);
        setPhotos(photoUrls);
      });
    setIsLoading(false);
  };

  useEffect(() => {
    fetchApi();
  }, []);

  const handlePhotoClick = (photo) => {
    setSelectedPhoto(photo);
  };

  const handleCloseModal = () => {
    setSelectedPhoto(null);
  };

  return (
    <>
      {isLoading ? (
        <Loader />
      ) : (
        <div className="photo-gallery">
          {photos.map((photo, index) => (
            <div
              className="photo"
              key={index}
              onClick={() => handlePhotoClick(photo)}
            >
              <img src={photo} alt={`Photo ${index + 1}`} />
            </div>
          ) : null)}
          {selectedPhoto && (
            <ImageModal photo={selectedPhoto} onClose={handleCloseModal} />
          )}
        </div>
      )}
    </>
  );
};

export default PhotoGallery;