如何在React中显示JSON中的实际图片而非图片链接

你的核心问题是没用到React的状态管理，反而用原生DOM操作修改内容，导致图片无法正常渲染。下面一步步给你修正：

1. 先明确问题根源 #

你当前的displayData函数用JSON.stringify(data)把图片URL转成了纯文本字符串，直接塞到DOM里，所以看到的是链接而不是渲染后的图片。而且直接操作DOM违背了React的渲染逻辑，应该用**状态（State）**管理数据，让React自动同步更新UI。

2. 用React的useState和useEffect改造代码 #

步骤拆解： #

• 导入useState（管理组件内部状态）和useEffect（处理API请求这类副作用）
• 初始化状态变量存储图片URL
• 在组件挂载时发起API请求，避免重复请求
• 请求成功后把图片URL存入状态
• 在JSX里直接用状态值作为img的src属性

修改后的完整代码： #

import React, { useState, useEffect } from 'react'

function Coffee() {
  // 初始化状态，保存图片URL，初始值为空字符串
  const [imageUrl, setImageUrl] = useState('');
  const baseURL = 'https://api.sampleapis.com/coffee/hot';

  // useEffect：组件首次挂载时执行一次API请求
  useEffect(() => {
    fetch(baseURL)
      .then(resp => resp.json())
      .then(data => {
        // 将获取到的第一张咖啡图URL存入状态
        setImageUrl(data[0].image);
      })
      // 增加错误捕获，避免请求失败导致页面报错
      .catch(err => console.error('请求出错：', err));
  }, []); // 空数组参数确保只执行一次

  return (
    <div id="test">
      {/* 根据状态渲染图片或加载提示 */}
      {imageUrl ? (
        <img src={imageUrl} alt="热咖啡" />
      ) : (
        <p>图片加载中...</p>
      )}
    </div>
  )
}
export default Coffee

3. 关键知识点说明 #

• useState：声明组件内部的状态变量，setImageUrl是更新该状态的函数，每次调用它，React会自动重新渲染组件，把最新的URL传递给img标签。
• useEffect：处理组件的副作用操作（比如API请求），第二个参数为空数组时，仅在组件首次挂载时执行一次，避免重复发起API请求。
• 为什么不用原生DOM操作？React通过虚拟DOM管理UI，直接修改真实DOM会导致React的状态与UI不同步，引发难以排查的bug，用状态驱动UI才是React的正确实践。

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