React中如何将POST请求返回的URL设为img标签的src属性？

原代码存在几个关键问题，下面是修正后的完整实现：

import { useState, useEffect } from 'react';

// 假设这是你的组件
const YourComponent = ({ innerIndex, image, category }) => {
  // 用状态存储图片URL，初始值可设为空或占位图地址
  const [imgSrc, setImgSrc] = useState('');

  const handlePostRequest = async () => {
    try {
      const response = await fetch('https://api.com', {
        method: 'POST',
        // 如果接口需要JSON格式参数，空字符串会报错，这里传空对象示例
        body: JSON.stringify({}), 
        headers: {
          'Content-Type': 'application/json',
        },
      });

      // 校验HTTP响应状态，处理非2xx的情况
      if (!response.ok) {
        throw new Error(`请求失败，状态码：${response.status}`);
      }

      const responseData = await response.json();
      // 假设API返回的URL字段是imageUrl，根据实际接口结构调整
      setImgSrc(responseData.imageUrl);
    } catch (error) {
      console.error('POST请求出错: ', error.message);
      // 请求失败时设置占位图
      setImgSrc('https://example.com/error-placeholder.jpg');
    }
  };

  // 组件挂载时触发请求，若需点击触发可绑定到按钮onClick事件
  useEffect(() => {
    handlePostRequest();
  }, []);

  return (
    <img
      key={innerIndex}
      src={imgSrc}
      title={image.title}
      className="m-3"
      loading="lazy"
      alt={category}
      // 图片加载失败时的兜底处理
      onError={(e) => e.target.src = 'https://example.com/default-placeholder.jpg'}
    />
  );
};

export default YourComponent;

关键修正点： #

• 用useState定义状态存储图片URL，请求完成后通过setImgSrc更新状态，触发组件重新渲染展示图片
• 修复responseData的作用域问题，直接在请求成功后更新状态，无需返回值
• 新增HTTP响应状态校验，捕获非成功状态的请求错误
• 用useEffect控制请求触发时机（组件挂载时执行一次，或按需绑定到交互事件）
• 添加请求失败、图片加载失败的兜底逻辑，避免页面出现破损图片

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