Map 在 React 中没有定义

Question

我收到一条错误消息：

“无法读取未定义的属性‘地图’”

我不确定有什么问题。 有人可以帮我解决吗？ 这是我使用 map 的代码：

import React from 'react';
import Product from './Product'
export default function Main(props){
    const{products}=props;
    return(
      <main className="block col-2">
          <h2> Products</h2>
              <div className="row">
     {products.map((product)=>(
    <Product key={product.id} product={product}/>
))}
              </div>
         
          </main>
    )
}

Answer 1

目前，您没有将产品传递到道具中。 那可能是因为您正在等待 state 更新，在这种情况下，做products?.map(...)可以解决您的问题。 否则，您可以通过执行const {products = []} = props来设置默认值。

Answer 2

当组件第一次渲染时， products变量很可能是未定义的。

像这样使用 && 运算符{products && products.map(product =>...)} 。 这样，它会在尝试在不存在的阵列上执行 map 之前检查产品是否为事物。 一旦 props 更新，组件将与产品一起重新渲染并显示在组件中。

所以完整的代码是：

import React from 'react';
import Product from './Product'
export default function Main(props){
    const{products}=props;
    return(
      <main className="block col-2">
          <h2> Products</h2>
              <div className="row">
     {products && products.map((product)=>(
    <Product key={product.id} product={product}/>
))}
              </div>
         
          </main>
    )
}