Next.js异步函数内组件渲染问题：卡片组件不渲染且props传递异常

问题分析 #

你的代码存在几个核心问题：

• 异步数据获取未结合React状态管理，组件无法感知数据变化并重新渲染
• map函数未返回JSX元素，导致生成的数组为空
• 返回的JSX中存在未定义变量aitem，且未正确渲染遍历后的组件
• Props传递或接收方式错误，导致Card组件无法获取到值

修正后的代码示例 #

Results组件 #

import { useState, useEffect } from 'react';
import Card from './Card'; // 确保Card组件路径正确

const Results = () => {
  // 用useState存储产品数据，初始值为空对象
  const [products, setProducts] = useState({});

  useEffect(() => {
    // 在useEffect中发起异步请求，避免组件重复渲染时重复调用
    const fetchProducts = async () => {
      const productData = await getProductInformation();
      setProducts(productData);
    };

    fetchProducts();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div className="resultView">
      {/* 遍历产品数据，返回Card组件并传递props */}
      {Object.keys(products).map((itemKey) => {
        const product = products[itemKey];
        // 必须返回JSX元素，同时给每个子元素添加唯一key
        return <Card key={itemKey} product={product} />;
      })}
    </div>
  );
};

export default Results;

Card组件（示例） #

确保Card组件正确接收props：

const Card = ({ product }) => {
  // 现在可以正常访问product数据
  console.log(product.ProductName);
  return (
    <div className="card">
      <h3>{product.ProductName}</h3>
      {/* 其他产品信息渲染 */}
    </div>
  );
};

export default Card;

关键修正点说明 #

• 状态管理与异步请求：使用useState存储数据，useEffect触发异步请求，数据更新后会自动触发组件重新渲染
• map函数返回元素：map回调中必须返回<Card/>，否则不会生成任何组件；同时添加唯一key属性是React列表渲染的要求
• Props传递：明确将product作为props传入Card组件，Card组件通过解构赋值接收props，确保能正确获取数据
• 类名修正：React中使用className而非class，避免和JavaScript关键字冲突

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