React应用调用API获取数据控制台可打印但页面无法显示

云上老周

2026-8-30

问题根因

你的代码存在2个直接导致渲染失败的问题：

接口请求拿到响应数据后，仅执行了console.log(response)打印操作，没有调用setData方法将接口返回值更新到组件state中，因此data始终是初始化时的空数组，遍历自然不会生成任何DOM元素。
img标签用法错误：img是自闭合标签，图片地址需要绑定到src属性上，不能将图片地址作为标签的子内容放置，同时列表遍历渲染时缺少React要求的唯一key标识。

修复方案

调整接口请求逻辑，拿到响应数据后调用setData更新状态，统一异步写法，不要混用async/await和.then链式调用避免逻辑混乱。
修正img标签的写法，给遍历生成的列表项补充唯一key值，同时给img补充alt属性提升可访问性。

修复后的完整可运行代码如下：

import React from 'react';
import './App.css';

function App() {
 const [data, setData] = React.useState([]);
 
 const getData = async()=>{
  const res = await fetch(`https://629e71fe3dda090f3c19d701.mockapi.io/v1/meals`,{method:"GET"})
  const response = await res.json()
  // 拿到数据后更新state
  setData(response)
 }

 React.useEffect(() => {
  getData()
 }, []);

  return (
    <div className='root'>
      <div className='container'>
        <div className='card'>
        <div className='juiceName'>
          {data.map((item)=>(
            // 补充列表唯一key属性
            <h1 key={item.id}>{item.name}</h1>
          ))}
        </div>
        <div className='juiceImage'>
          {data.map((item)=>(
            // 修正img写法，地址绑定到src，使用自闭合格式
            <img key={item.id} src={item.image} alt={item.name} />
          ))}
        </div>
        </div>
      </div>
    </div>
  )
}

export default App;