React多层组件传props报错：Cannot read properties of undefined (reading 'map')

问题根源分析 #

你的代码存在几处语法错误和边界处理缺失，导致products在执行map时变为undefined：

• 父组件ShopPage未返回JSX内容，导致Products组件未被渲染，子组件无法获取products属性
• Product组件存在未闭合标签、未导入样式模块的语法错误
• 未处理products为undefined的边界情况
• 若Categories的导出存在问题，也会导致初始状态不是有效数组

修复步骤 #

1. 修复父组件ShopPage #

补充return语句，确保JSX被正确返回：

import React, { useState } from "react";
import Categories from "./Categories";
import Products from "./Products";

const ShopPage = () => {
  const [data, setData] = useState(Categories);
  
  return (
    <>
      <Products products={data} />
    </>
  );
};

export default ShopPage;

2. 修复Product组件 #

修正语法错误并添加边界处理：

// 导入对应的CSS Module文件（根据实际路径调整）
import styles from './Product.module.css';

const Product = ({ products }) => {
  // 处理products为undefined或空数组的情况
  if (!products || products.length === 0) {
    return <div>No products available</div>;
  }

  return (
    <div>
      {products.map((value) => {
        const { id, title } = value;
        return (
          <div
            className={styles.item}
            key={id}
          >
            <h1>{title}</h1>
          </div>
        );
      })}
    </div>
  );
};

export default Product;

3. 检查Categories的导出 #

确保Categories文件正确导出数组：

// Categories.js示例
export default [
  { id: 1, title: "Sample Product 1" },
  { id: 2, title: "Sample Product 2" }
];

额外优化建议 #

• 给组件props设置默认值，从根源避免undefined问题，比如Product组件可改为：

  const Product = ({ products = [] }) => { ... }
  

• 开启React严格模式，提前发现语法和逻辑错误

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