前端开发：如何用错误图片替代错误文本信息？

关键修改点 #

1. 修正错误状态的设置逻辑：原代码中catch块的setIsError语法有误，需正确设置错误状态（建议将isError改为布尔类型，更适合判断是否出错）。
2. 添加条件渲染逻辑：根据错误状态，在组件中渲染错误图片或正常业务内容。

完整实现代码 #

import { useState, useEffect } from 'react';
import axios from 'axios';

const FALLBACK_IMAGE = "https://devprojectupload.s3.ap-south-1.amazonaws.com/32490.png";

const ModelComponent = (props) => {
  const [height, setHeight] = useState(window.innerHeight);
  const [width, setWidth] = useState(window.innerWidth);
  // API data 改为null，更易判断是否有有效数据
  const [modelData, setModelData] = useState(null);
  // Error状态改为布尔类型，仅判断是否出错
  const [isError, setIsError] = useState(false);
  // 可选：添加加载状态提升用户体验
  const [isLoading, setIsLoading] = useState(true);

  useEffect(() => {
    axios.get("https://51fgc922b7.execute-api.ap-south-1.amazonaws.com/dev/productpreview")
      .then((res) => {
        console.log(res.data.data);
        setModelData(res.data.data[0]);
        setIsError(false);
      })
      .catch((error) => {
        console.error('请求出错:', error);
        setIsError(true);
      })
      .finally(() => {
        setIsLoading(false); // 请求完成后结束加载状态
      });
  }, []);

  // 完善窗口大小监听逻辑
  useEffect(() => {
    const handleResize = () => {
      setHeight(window.innerHeight);
      setWidth(window.innerWidth);
    };
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  // 条件渲染逻辑
  if (isLoading) {
    return <div>加载中...</div>;
  }

  if (isError) {
    return (
      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: height }}>
        <img 
          src={FALLBACK_IMAGE} 
          alt="请求错误，请稍后重试" 
          style={{ maxWidth: '100%', maxHeight: '80vh' }} 
        />
      </div>
    );
  }

  // 正常渲染业务内容（需根据实际modelData结构调整）
  return (
    <div>
      {modelData ? (
        <div>
          <h2>{modelData.productName}</h2>
          <img src={modelData.productImage} alt={modelData.productName} style={{ maxWidth: '100%' }} />
          {/* 其他产品信息渲染 */}
        </div>
      ) : (
        <div>暂无产品数据</div>
      )}
    </div>
  );
};

export default ModelComponent;

代码说明 #

• 错误状态优化：用布尔类型的isError简化出错判断，请求成功时自动重置错误状态。
• 加载状态：避免请求过程中页面空白，给用户明确的加载反馈。
• 错误图片渲染：出错时居中显示预设图片，通过样式控制图片的最大尺寸，保证适配不同屏幕。
• 业务内容渲染：根据返回的modelData结构渲染具体产品信息，无数据时显示兜底提示。

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