TypeError：E.map 不是函数 reactjs

Question

我正在使用react js创建一个react应用，但是出现了这个错误，TypeError: E.map is not a function，它运行良好，但是当我尝试部署时我的网站显示该错误。

这是代码。

 <ul className="products">
      {products.map((product) => (
        <li key={product._id}>
          <div className="product">
            <Link to={'/product/' + product._id}>
              <img
                className="product-image"
                src={product.image}
                alt="product"
              />
            </Link>
            <div className="product-name">
              <Link to={'/product/' + product._id}>{product.name}</Link>
            </div>
            <div className="product-brand">{product.brand}</div>
            
            <div className="product-rating">
              <Rating
                value={product.rating}
                text={product.numReviews + ' reviews'}
              />
            </div>
          </div>
        </li>
      ))}
    </ul>

请帮忙解决 谢谢。

Answer 1

检查是products 值一个数组，然后映射到它们

你可以这样做

render() {
    if (!Array.isArray(products)) return null
    ... heree your code
}

除了 null，你可以返回类似Products not founds

或者在初始化products时你可以给一个默认值

const { products = [] } = props

但在这种情况下，如果产品来自null，您将收到相同的错误