Как сгенерировать ошибку в выражении 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 из каждого продукта в качестве ключа.Индекс должен всегда быть вторым вариантом, если у вас нет уникального идентификатора в данных, тогда используйте индекс, иначе не делайте этого.

Поскольку вы уже используете .forEach или .map, вам не нужно использовать индекс для получениядетали продукта, потому что .map или .forEach предоставит вам каждый объект из массива продуктов.Вы можете просто получить доступ к product.itemId и другим подобным

. Причина, по которой вы получаете неопределенную ошибку, может заключаться в том, что состояние продуктов изначально неопределенное или пустой массив, и именно поэтому вы получаете эту ошибку

проверьте, является ли products массивом и содержит ли он список объектов, проверив его длину, а затем выполните .map

Вам не нужно отслеживать индекс, вам не нужна локальная переменная массива, чтобы вставить компонент Product в него

Ниже представлен наиболее эффективный способ рендеринга компонента 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>
     )
  }

.map с возвратом

  .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, и соответственно проверить эти два возвращаемых резервных интерфейса пользователя