Блог

#reactjs #react-native

Вопрос:

 <>
            <h1>Latest Products</h1>
            {loading ? (
            <h2>loading...</h2>
            ) : error ? (
             <h3>{error}</h3> 
            ) :  
             <Row>
                
                {products.map((product) => (
                    <Col key={product._id} sm={12} md={6} lg={4} xl={3}>
                       
                        <Product product={product} />
                    </Col>
                ))}
            </Row>}

        </>
 
 

Комментарии:

1. попробуйте {products.map((product) => { console.log(product) return ( <Col key={product._id}> </Col> ) })} просмотреть полный отображаемый список

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

Ответ №1:

Комментарии:

1. (6) [{…}, {…}, {…}, {…}, {…}, {…}] после регистрации я получаю массив в консоли, но когда я пытаюсь отобразить его, он не отображается

2. не могли бы вы, пожалуйста, показать значение массива продуктов. вы можете показать это с помощью console.log(«продукты», JSON.stringify(продукты))

3. { «рейтинг»: 4.5, «Количество просмотров»: 12, «цена»: 89.99, «Количество»: 10, «_id»: «609584c01fa8d0331c41deeb», «название»: «Беспроводные Bluetooth-наушники Airpods», «изображение»: «/images/airpods.jpg», «описание»: «Технология Bluetooth позволяет подключать ее к совместимым устройствам по беспроводной сети с высоким качеством AAC alls во время работы», «бренд»: «Apple», «категория»: «Электроника», «пользователь»: «609584bf1fa8d0331c41dee8», «отзывы»: [], «__v»: 0, },

4. массив содержит 6 объектов с разными (._id)

5. Пожалуйста, попробуйте {products.map((продукт, индекс) => ( ><Ключ Col={индекс} sm={12} md={6} lg={4} xl={3}> <Ключ Col={индекс} sm={12} md={6} lg={4} xl={3}><Продукт продукт={продукт} /> <Продукт продукт={продукт} /></Col> ))}

Ответ №2:

 <Row>
  {products.map((product, index) => (
    <Col key={`${product._id}-${index}`} sm={12} md={6} lg={4} xl={3}>
      <Product product={product} />
    </Col>
  ))}
</Row>;
 

Комментарии:

1. когда я попробовал это, ошибка исчезла, но самое худшее, что произошло, это то, что продукт также исчез с экрана chrome

2. можете ли вы опубликовать функцию, которая загружает продукты?

3. const Product = ({ продукт }) => { возврат( ><Имя класса карты=’мой-3 р-3 округлено’> <Имя класса карты=’мой-3 р-3 округлено’><Ссылка на={ /product/${product._id} }> > Img src={product.image} вариант=’сверху’ /> ></Ссылка> </Ссылка><Card.Body> <Card.Body><Ссылка на={ /product/${product._id} }> > Заголовок как=’div’> ><сильный>{product.name}<сильный></сильный> </сильный> Название> ></Ссылка> </Ссылка> Текст как=’div’> ><Значение рейтинга={product.рейтинг} текст={ ${product.rating} stars } />></Card.Text> </Card.Text> Текст как=’h3′> ${product.price} ></Card.Text> </Card.Text></Card.Body></Card.Body></Card>)}

4. Я буквально новичок в том, чтобы реагировать, поэтому, если я прокомментировал неправильно, скажите мне, пожалуйста, тай

5. импорт axios из «axios» импорт { PRODUCT_LIST_FAIL, PRODUCT_LIST_SUCCESS, PRODUCT_LIST_REQUEST } из «../константы/константы продукта » экспорт const listProducts = () => асинхронный (отправка) =>> { попытка { отправка({ тип: PRODUCT_LIST_REQUEST }) const { данные } = ожидание axios.get (‘/api/продукты’) отправка({ тип: PRODUCT_LIST_SUCCESS, полезная нагрузка: данные }) } поймать (ошибка) { отправка({ тип: PRODUCT_LIST_FAIL, полезная нагрузка: ошибка.ответ amp;amp; ошибка.ответ.данные.сообщение ? ошибка.ответ.данные.сообщение : ошибка.сообщение, })} }