Map 没有在 React 中定义答案

【问题标题】：Map is not defined in ReactMap 没有在 React 中定义
【发布时间】：2021-01-03 17:52:43
【问题描述】：

我收到一条错误消息：

“无法读取未定义的属性'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>
    )
}

【问题讨论】：

你能在渲染<Main products=.. />的地方添加代码吗？
只是 products 未定义。您使用 Main 组件的地方应该发送 products 道具。一旦你发送数组作为道具，错误就会消失。
在您最喜欢的搜索引擎上搜索错误，您会发现很多示例说明错误发生的原因。很可能，在 Main 运行时，products 属性尚未定义，因为异步调用或类似的事情。但是，如果问题中没有这些信息，我们所能做的就是猜测，就像您收到的答案一样。

标签： javascript reactjs map-function

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

像 {products && products.map(product => ...)} 这样使用 && 运算符。这样，在尝试对不存在的数组执行映射之前，它会检查产品是否为事物。一旦 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>
    )
}

【讨论】：