React项目中加载Spinner显示逻辑优化需求：仅在数据库存在图片且未加载完成时显示

我来帮你搞定这个问题！你的核心痛点是当数据库无图片时，加载Spinner和"No Image"占位图同时显示，根源在于当前的Spinner显示条件逻辑不对，我们来一步步修正它。

问题分析 #

原代码中Spinner的判断条件是：

{imgLoaded && dataPic === null ? null : <Spinner...>}

这个逻辑的问题在于：当dataPic为null（无图片）且imgLoaded初始为false时，imgLoaded && dataPic === null的结果是false，所以会进入显示Spinner的分支，这就导致了占位图和Spinner同时出现的情况。

我们需要的逻辑是：仅当数据库存在图片，并且该图片还在加载状态时，才显示Spinner。

修正方案 #

我给你调整了代码逻辑，新增了请求状态跟踪，同时精准控制Spinner的显示时机：

import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Spinner } from 'react-spinners-css';
import nophoto from '../../../data/images/nophoto.png'

const id = (window.location.pathname).split("-")[1];

function Team() {
  const [imgLoaded, setImgLoaded] = useState(false);
  const [dataPic, setDataPic] = useState(null);
  const [isFetching, setIsFetching] = useState(true); // 跟踪图片请求状态

  const getPhoto = () => {
    axios
      .get(`${process.env.REACT_APP_API_URL}/photo-${id}`)
      .then((res) => {
        if (res.status === 200) {
          const parts = res.data.split(",");
          const result = parts[parts.length - 1];
          setDataPic(result);
        }
      })
      .catch((error) => {
        console.log(error);
      })
      .finally(() => {
        setIsFetching(false); // 请求完成后结束加载状态
      });
  }

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

  return (
    <div>
      {/* 仅当：请求完成 + 存在图片 + 图片未加载完成 时显示Spinner */}
      {!isFetching && dataPic !== null && !imgLoaded && (
        <div style={{ textAlign: 'center', padding: '2rem' }}>
          <Spinner color="#5869FF" />
          <p>Is loading...</p>
        </div>
      )}

      {/* 分状态显示内容 */}
      {isFetching ? (
        <p style={{ textAlign: 'center' }}>Checking photo...</p> {/* 请求中的过渡提示 */}
      ) : dataPic === null ? (
        <img src={nophoto} alt="No Image" />
      ) : (
        <img 
          src={`data:image/png;base64,${dataPic}`} 
          alt="Team Photo" 
          onLoad={() => setImgLoaded(true)} 
          style={{ display: imgLoaded ? 'block' : 'none', margin: '0 auto' }}
        />
      )}
    </div>
  )
}

export default Team

关键修改点说明 #

1. 新增isFetching状态：用来跟踪图片请求是否完成，避免在请求过程中就错误显示占位图或Spinner。
2. 精准控制Spinner显示条件：!isFetching && dataPic !== null && !imgLoaded，确保只有确认有图片且图片还在加载时，才显示Spinner。
3. 分阶段显示内容：
   • 请求中：显示过渡提示（可根据需求修改或移除）
   • 请求完成无图片：仅显示"No Image"占位图
   • 请求完成有图片：加载过程显示Spinner，加载完成后显示图片
4. 优化图片显示体验：给图片添加display样式，加载完成前隐藏，避免出现空白或破碎图标。

这样修改后，完全符合你的需求：只有数据库存在图片且图片处于加载状态时，才会显示Spinner，无图片时只会显示占位图。

内容的提问来源于stack exchange，提问作者Mr. Hankey