如何在 this.state.forEach 语句中抛出错误

Question

我读了一些关于错误抛出的内容，但我真的不明白当反应抱怨它未定义时如何为下面这段代码中的特定代码抛出错误。

我要使用 componentDidCheck 吗？如果是，你是怎么做到的？它捕获错误的代码在下面，它是它爆炸的 forEach

class Subject extends React.Component {

state = {
    subject: [],
}

render() {
    var products = [];
    var index = 0;

    this.state.subject.forEach(product => {
        subjects.push(<Product
            key={index} subjectName = {this.state.subjects[index].name} 
            subjectPrice = {this.state.subject[index].salePrice}
            subjecttId = {this.state.subject[index].itemId}
        />)
        index++;
 });

Answer 1

你在不必要地制造复杂的逻辑。你必须在你的情况下使用 .map。使用 .map

很简单

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

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

您收到未定义错误的原因可能是因为产品状态最初是未定义或空数组，这就是您收到该错误的原因

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

你不需要跟踪索引，你不需要本地数组变量来将 Product 组件推入其中

以下是以简单干净的方式呈现产品组件的最有效方式

.map 没有 return

   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>
     )
  }

.map 与 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 给您的错误和信息，并相应地检查这两个 return 回退 UI

如何在 this.state.forEach 语句中抛出错误

How to throw an error in this.state.forEach statement in react

exception-handling

reactjs