Question

我读了一些有关错误抛出的内容，但是当我对未定义的错误有所抱怨时，我真的不明白如何为下面的代码抛出错误。

我是否使用componentDidCheck？如果是，您到底该怎么做？捕获错误的代码如下，它是forEach崩溃的地方

  <Select
    name={name}
    value={data[name]}
    label={label}
    options={options}
    onChange={this.handleChange}
    idKey="IDProject"
    nameKey="Project"
  />

Answer 1

您不必要地制作复杂的逻辑。您必须根据情况使用.map。只需使用.map

不要将索引用作键，而应将每个产品的itemId用作键。如果您在数据中没有唯一的ID，则索引应始终是第二个选择，否则请选择索引。

由于您已经在执行.forEach或.map，因此无需使用索引来获取产品详细信息，因为.map或.forEach将为您提供product数组中的每个对象。您可以只访问product.itemId和类似的

出现未定义错误的原因可能是因为产品状态最初是未定义或为空数组，这就是为什么会出现该错误

因此，请通过检查商品的长度来检查产品是否为数组并包含对象列表，然后执行.map

您不需要跟踪索引，也不需要本地数组变量即可将Product组件推入其中

以下是用简单明了的方式呈现产品组件的最有效方法

.map不返回

   render() {
   const { products } = this.state;
   return(
        <div>
           {Array.isArray(products) && products.length > 0 && products.map(product=> (
    <Product key={product.itemId} productName = {product.name} productPrice = {product.salePrice} productImage = {product.thumbnailImage} productId = {product.itemId}
    />))}
    </div>
     )
  }

.return的地图

  .map without return

   render() {
   const { products } = this.state;
   return(
        <div>
           {Array.isArray(products) && products.length > 0 && products.map(product=> {
    return <Product key={product.itemId} productName = {product.name} productPrice = {product.salePrice} productImage = {product.thumbnailImage} productId = {product.itemId}
    />})}
    </div>
     )
  }

如果您像上面那样做，就不会出错。我发布了此答案以纠正您的问题，因为您使事情变得复杂

您可以检查componentDidCatch给您的错误和信息，并相应地检查这两个返回的后备UI

如何在react.this.state.forEach语句中引发错误

1 个答案: