React中API数据获取与Card组件渲染异常问题求助

看起来你在React里用API数据渲染Card组件的时候踩了好几个典型的小坑，我来帮你一步步梳理问题，然后给出可行的解决方案～

先说说你当前代码里的核心问题： #

1. 异步逻辑的执行方式错误
   你直接在JSX里调用fetchData()，但这个函数是async的，返回的是Promise，React根本没法直接渲染Promise，这就是你看到"unknown Component is an async Client Component"错误的原因。而且每次组件渲染都会触发这个函数调用，导致疯狂重复请求API（100次的原因是组件反复渲染，每次都调用一次fetch）。

2. 数据没存到状态里，也没正确返回组件
   你在fetchData的循环里创建了<Card/>组件，但既没把这些组件收集起来返回，也没把API数据存到React的状态中。React的组件渲染依赖状态驱动，没有状态的话，组件根本不知道要渲染什么内容，所以页面会是空白的。

现在给你修正后的完整解决方案： #

我们需要用useState存储API数据，用useEffect在组件挂载时只执行一次API请求，最后遍历状态数据渲染Card组件。

第一步：修改App.js代码

import React, { useState, useEffect } from 'react'
import Card from './components/Card'

function App() {
  // 定义状态存储API返回的帖子数据
  const [posts, setPosts] = useState([])

  // 用useEffect确保组件挂载时只请求一次API
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/posts")
        const data = await response.json()
        // 将获取到的数据存入状态
        setPosts(data)
      } catch (err) {
        console.error('数据获取失败:', err)
      }
    }

    fetchData()
  }, []) // 空依赖数组 = 仅在组件首次挂载时执行

  return (
    <>
      <div className="card_container">
        {/* 遍历posts数组，为每个数据项渲染Card组件 */}
        {posts.map(post => (
          <Card
            key={post.id} // 必须添加唯一key，这是React列表渲染的硬性要求
            title={post.title}
            body={post.body}
          />
        ))}
      </div>
    </>
  )
}

export default App

第二步：Card组件保持你的原代码即可（注意React首字母要大写）

import React from 'react'

function Card(props) {
  return (
    <div className="card">
      <div className="title">{props.title}</div>
      <div className="body">{props.body}</div>
    </div>
  )
}

export default Card

关键修改点说明： #

• useState存储数据：当API数据获取成功后，用setPosts更新状态，React会自动触发组件重新渲染，把新数据展示出来。
• useEffect控制请求时机：空依赖数组让API请求只在组件第一次加载时执行一次，彻底解决重复请求的问题。
• map遍历渲染组件：用posts.map()生成Card组件列表，每个组件添加key={post.id}（唯一标识），帮助React高效更新列表。
• 错误捕获：添加try/catch可以在API请求失败时打印错误信息，方便排查问题。

这样修改后，你就能看到所有帖子的title和body都正确渲染在Card组件里了，不会再出现空白页和异步组件的错误～

内容来源于stack exchange