React组件无法识别Prop：从App.js传对象数组至子组件失败

从你提供的截图来看，子组件出现'products' is not defined错误，核心问题集中在props的接收或传递环节，给你几个直接的排查和解决方向：

• 检查子组件的props接收逻辑
  函数组件必须正确接收props参数才能访问传递过来的属性，两种常用写法：

  // 写法1：直接接收props对象，通过props.xxx调用
  function ProductList(props) {
    return (
      <div>
        {props.products.map(item => <div key={item.id}>{item.name}</div>)}
      </div>
    )
  }
  
  // 写法2：解构props，直接使用属性名
  function ProductList({ products }) {
    return (
      <div>
        {products.map(item => <div key={item.id}>{item.name}</div>)}
      </div>
    )
  }
  

  要是你没声明props参数就直接写products，必然会触发未定义错误。

• 确认父组件App.js的传递是否正确
  确保在App中引入子组件时，确实传递了products属性，且变量名完全匹配：

  import ProductList from './ProductList';
  
  function App() {
    const products = [/* 你的对象数组内容 */];
    return (
      <div className="App">
        <ProductList products={products} /> {/* 属性名要和子组件接收的一致 */}
      </div>
    );
  }
  

  注意别写错属性名，比如把products写成product，子组件里props.products就会是undefined。

• 处理异步场景的初始值
  如果你的products是异步获取的（比如接口请求），初始状态可能为undefined，建议给子组件的props设置默认值避免报错：

  // 方式1：给组件设置默认props
  ProductList.defaultProps = {
    products: []
  };
  
  // 方式2：解构时直接设置默认值
  function ProductList({ products = [] }) {
    // 组件逻辑
  }
  

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