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

Question

[lucky4]

На странице, есть два запроса на бэк. 1 - все товары, 2 - конкретный товар(его id).

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

    useEffect(() => {
        const fetchData = async () => {
          const responseId = await getProduct(id)

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

    useEffect(() => {
        const fetchData = async () => {
          const responseList = await getProducts();

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

Проблема состоит в том, что у меня не выводится конкретный продукт на странице. В консоле отправляет 400 ошибку, т.к. url = undefiend.

<div className="content-inner in-col">
                <div className="item-page">
                    <div className="item-page__holder">
                        <img className="item-page__image" src={ product.image } alt="item" />
                        <Button 
                            label="Purchase"
                        />
                    </div>

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

                <h3 className="title medium-height-padding">More products</h3>
                <div className="list__item">
                    {
                        productList && productList.map(item => 
                            <ProductItem ......

export function getProduct(id) {
    return axios.get(URL + `products/${id}`);
}

export function getProducts() {
    return axios.get(URL + 'products');
}

Comments

[Alexandr]

400 это "bad request". Т.е. запрос до сервера, таки, дошел. Значит, весь url целиком не может быть undefined.
Приведите сообщение об ошибке целиком, может, это что-нибудь прояснит.

[lucky4]

Alexandr, возможно, я не правильно выразился. я имелл виду что url -> localhost:xxx/products/undefiend

[Alexandr]

lucky4, обычно "undefined" в качестве значения переменной говорит о том, что ей никогда не было присвоено значение в коде.
Если ItemPage это функциональный реакт-компонент, то его аргумент это props, т.е. атрибуты, которые передаются при использовании компонента. Если значение аргумента (в вашем случае id) это undefined, можно предположить, что при использовании компонента никаких атрибутов он не получает.
----
upd: или получает в id тот же undefined. В общем, искать нужно за пределами этого компонента.

Answer 1

[Klein Maximus]

Скорее всего Вы не передаете id в пропсы ItemPage.