Как вывести данные из JSON?

Question

[embiid]

У меня есть страничка для определенного товара, и под ним вытаскиваются тоже данные. Другие товары - рендерятся, выводятся, все ок) Но, вот тот продукт который должен вывести данные - нет.

function ItemPage({ id }) {
const [product, setProduct] = useState([])
    const [productList, setProductList] = useState([])

    const URL = "https://localhost:5001/products/"
    const URL_ID = URL + `${ id }`

    useEffect(() => {
        const fetchData = async () => {
          const responseList = await axios.get(URL)

          setProductList(responseList.data)
        };
    
        fetchData();
    }, []);

    useEffect(() => {
        const fetchData = async () => {
          const responseId = await axios.get(URL_ID)

          setProduct(responseId.data)
          console.log(responseId.data)
        };
    
        fetchData();
    }, []);
...
{
                        product && product.map(item => 
                            <div>
                                <div className="item-page__holder">
                                    <img className="item-page__image" src={ item.thumbnail } alt="item" />
                                    <Button 
                                        label="Purchase"
                                    />
                                </div>

                                <div className="item-page__content">
                                    <h3>{ item.label }</h3>
                                    <h3>{ item.price }</h3>
                                </div>
                            </div>
                        )
                    }

Когда перехожу на другие товары, у меня в URL соответствует id. Но при:

setProduct(responseId.data)
          console.log(responseId.data)

в консоли вижу, что url/undefiend.

Comments

[Максим]

https://codepen.io/topicstarter/pen/qBqvLzK
fetch

Answer 1

[black1277]

useEffect в котором

setProduct(responseId.data)
console.log(responseId.data)

выполняется один раз, и при смене id ничего не происходит(потому что в зависимостях стоит [] - пустой массив). Попробуйте вторым аргументом в useEffect поставить id - тогда все должно получится. Нужно в виде масcива [id]

Comments

[embiid]

Спасибо! Как я понимаю, Вы имели ввиду так:

useEffect(() => {
        const fetchData = async () => {
          const responseId = await axios.get(URL_ID)

          setProduct(responseId)
          //setProduct(responseId.data)
        };
    
        fetchData();
    }, [id]);

К сожалению, все равно undefined

[black1277]

нужно поместить const responseId = await axios.get(URL_ID)
в конструкцию try{}catch{} и вывести в лог есть ли ошибки и уже от этого отталкиваться дальше