Блог

Всем привет, есть ли кто-нибудь, кто знает, как я могу показать эти данные, потому что здесь это не работает для меня. Я сделал специальный крюк для извлечения данных. и теперь я хочу получить доступ ко всем различным продуктам с определенным идентификатором. например (категории/2). На картинке вы можете увидеть крючок и де product.js где я пытаюсь отобразить данные.

Однажды я получил сообщение об ошибке, что я должен поместить его в массив? Но я не понимаю, что это значит. Я получаю данные из api с базой данных mysql.

 import { useState, useEffect } from "react";

const useFetch = (url) => {
    const [data, setData] = useState(null)
    const [error, setError ] = useState(null)


useEffect(() => {
    setTimeout(() => {
        fetch(url) //custom url so you can reuse it
        .then(res => {
            if(!res.ok) {
                throw Error('could not fetch data');
            }
            return res.json();
        })
        .then(data =>  {
            setData(data);
        })
        .catch(err => {
            setError(null)
        })
    }, 1000);
}, [url]);

    return [data, error] //use properties with custom hook
}


export default useFetch;
 

 import React from "react";
import "../Style/menu.css";
import { useParams } from "react-router-dom";
import useFetch from "../ApiService/useFetch";
import ProductList from "../Components/ProductList";

const Product = () => {

    const { id } = useParams();
    const { data: product, error } = useFetch('http://localhost:8080/products/category/'   id);

        return (
            <div>
                {error amp;amp; <div>{ error } </div>}
                {product amp;amp; (
                    <h1>{product.name}</h1>
                )}
            </div>
        )
}

export default Product;
 

Ваш пользовательский хук возвращает массив, но вы пытаетесь его деконструировать. Тебе нужно измениться

 const { data: product, error } = useFetch('http://localhost:8080/products/category/'   id);
 

Для

 const [product, error] = useFetch('http://localhost:8080/products/category/'   id);