Реагируйте API на один продукт, не отображающий

#reactjs

Вопрос:

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

(Главный экран, на котором отображается все, работает нормально)

 import React, { useState, useEffect } from 'react' import Product from '../components/Product' import { Row, Col } from 'react-bootstrap' import axios from 'axios'  const HomeScreen = () =gt; {  const [products, setProducts] = useState([])   useEffect(() =gt; {  const fecthProducts = async () =gt; {  const { data } = await axios.get('/api/products')   setProducts(data)  }   fecthProducts()  }, [])   return (  lt;gt;  lt;h1gt;Jewelrylt;/h1gt;  lt;Rowgt;  {products.map((product) =gt; (  lt;Col key={product.id} sm={12} md={6} lg={4} xl={3}gt;  lt;Product product={product} /gt;  lt;/Colgt;  ))}  lt;/Rowgt;  lt;/gt;  ) }  export default HomeScreen

(это единственная страница продукта, на которой)

 import { Link, useParams } from 'react-router-dom' import {  Row,  Col,  Image,  ListGroup,  ListGroupItem,  Button } from 'react-bootstrap' import axios from 'axios'  const ProductScreen = () =gt; {  const [product, setProduct] = useState([])  const { id } = useParams()   useEffect(() =gt; {  const fetchProduct = async () =gt; {  const { data } = await axios.get(`/api/products/${id}`)   setProduct(data)  }   fetchProduct()  }, [id])   return (  lt;gt;  lt;Link className="btn btn-light my-3" to="/"gt;  GO BACK  lt;/Linkgt;   lt;Rowgt;  lt;Col md={4}gt;  lt;divgt;  lt;Image src={product.image} alt={product.name} fluid rounded /gt;  lt;/divgt;  lt;/Colgt;  lt;Col md={3}gt;  lt;ListGroupgt;  lt;ListGroupItemgt;  lt;h4gt;{product.name}lt;/h4gt;  lt;h5gt;${product.price}lt;/h5gt;  lt;/ListGroupItemgt;  lt;ListGroupItemgt;{product.description}lt;/ListGroupItemgt;  lt;ListGroupItemgt;  {product.inStock gt; 0 ? 'In Stock' : 'Out of Stock'}  lt;/ListGroupItemgt;  lt;ListGroupItemgt;  lt;Button  className="btn-block"  type="button"  disabled={product.inStock === 0}  gt;  Add to Cart  lt;/Buttongt;  lt;/ListGroupItemgt;  lt;/ListGroupgt;  lt;/Colgt;  lt;/Rowgt;  lt;/gt;  ) }  export default ProductScreen

На рисунке ниже показано, как отображается страница ProductScreen

https://i.stack.imgur.com/PJKpa.png

Ответ №1:

В состоянии продукта вы храните массив объектов, а не один объект. Пожалуйста, получите результат, похожий на функцию визуализации

продукт amp;amp; продукт[0] amp;amp; продукт[0].название

и так же, как и другие значения, изменяются в зависимости от свойств.

Ответ №2:

product в вашем случае это aray один элемент, вместо этого используйте приведенный ниже код :

 useEffect(() =gt; {  const fetchProduct = async () =gt; {  const { data } = await axios.get(`/api/products/${id}`)   setProduct(data[0])  }   fetchProduct() }, [id])

1. Классно! Это сработало идеально! Вопрос, если массив содержит только один элемент, зачем необходимо указывать индекс?

2. чтобы иметь возможность правильно использовать product.name product.price или то , что вы хотите, product должен быть объект, а не массив, поэтому вам нужно указать индекс. вы можете использовать setProduct(data) , но в этом случае вместо product.name этого вы должны использовать product[0].name . Я надеюсь, что это ясный, приятный день кодирования !

3. Да! Спасибо!