Не могу с помощью AXIOS получить ответ от JSON

Консоль выдает undefined.

Мой код :

const App = () => {
    const [guitars, setGuitars] = useState([]);

    useEffect(() => {
        axios
            .get('http://localhost:3000/db.json')
            .then(resp => resp.json())
            .then(json => {
                setGuitars(json.guitars);
            });
    }, []);

    return (
        <div className='wrapper'>
            <Header />
            <div className='content'>
                <Routes>
                    <Route path='/*' element={<Home />} guitarItems={guitars} />
                    <Route path='/Cart/*' element={<Cart />} />
                </Routes>
            </div>
        </div>
    );
};

Затем пытаюсь данные через пропсы прокинуть в другой компонент :

function Home({ guitarItems }) {
    console.log(guitarItems)
    return (
        <div className='container'>
            <div className='content__top'>
                <Categories
                    items={['Gibson', 'Jackson', 'Dean', 'Fender', 'Ibanez']}
                />
                <Sort sortItems={['популярности', 'цене', 'алфавиту']} />
            </div>
            <h2 className='content__title'>Все инструменты</h2>
            <div className='content__items'>
                {guitarItems.map(obj => (
                    <GuitarBlock />
                ))}
            </div>
        </div>
    );
}

JSON документ :

{
    "guitars": [
        {
            "id": 0,
            "imageUrl": "https://www.muztorg.ru/files/sized/f250x250/4n4/edt/et3/qww/0g0/ko4/c00/8oc/w/4n4edtet3qww0g0ko4c008ocw.jpeg",
            "name": "Gibson Les Paul",
            "types": [0, 1],
            "sizes": [26, 30, 40],
            "price": 4240,
            "category": 0,
            "rating": 4
        },
        {
            "id": 1,
            "imageUrl": "https://www.muztorg.ru/files/sized/f250x250/ceb/cts/53y/cgk/owk/800/8og/00s/8/cebcts53ycgkowk8008og00s8.jpeg",
            "name": "Gibson SG Tribute Vintage",
            "types": [0],
            "sizes": [26, 40],
            "price": 2240,
            "category": 1,
            "rating": 6
        },
        {
            "id": 2,
            "imageUrl": "https://www.muztorg.ru/files/sized/f250x250/9bw/4n4/kz7/g0s/04k/w0k/cow/o48/s/9bw4n4kz7g0s04kw0kcowo48s.jpeg",
            "name": "Gibson EDS Double Neck",
            "types": [0],
            "sizes": [26, 40],
            "price": 9980,
            "category": 1,
            "rating": 4
        },
        {
            "id": 3,
            "imageUrl": "https://avatars.mds.yandex.net/get-mpic/5220597/img_id8433198049456476759.jpeg/orig",
            "name": "Jackson USA RR1",
            "types": [1],
            "sizes": [26, 30, 40],
            "price": 6720,
            "category": 2,
            "rating": 2
        },
        {
            "id": 4,
            "imageUrl": "https://sidex.ru/images_offers/1182/1182404/thumb/dean_razorback_twotone_1.jpg",
            "name": "Dean Razorback DB",
            "types": [0, 1],
            "sizes": [26, 30, 40],
            "price": 1795,
            "category": 3,
            "rating": 8
        },
        {
            "id": 5,
            "imageUrl": "https://www.bigtv.ru/storage/goodsImages/95/95863/300x300-95863_1.webp",
            "name": "Dean ML 79",
            "types": [0],
            "sizes": [30, 40],
            "price": 1350,
            "category": 2,
            "rating": 2
        },
        {
            "id": 6,
            "imageUrl": "https://img.dynatone.ru/image/cache/_product/dt55259_148870-350x300.jpeg",
            "name": "Fender Stratocaster",
            "types": [0, 1],
            "sizes": [26, 30, 40],
            "price": 3120,
            "category": 1,
            "rating": 9
        },
        {
            "id": 7,
            "imageUrl": "https://img.dynatone.ru/image/cache/_product/dt56150_134933-350x300.jpeg",
            "name": "Fender Telecaster",
            "types": [0, 1],
            "sizes": [26, 30, 40],
            "price": 2520,
            "category": 4,
            "rating": 10
        },
        {
            "id": 8,
            "imageUrl": "https://img.dynatone.ru/image/cache/_product/dt42432_113999-350x300.jpeg",
            "name": "Ibanez RG652 Prestige",
            "types": [0, 1],
            "sizes": [26, 30, 40],
            "price": 920,
            "category": 5,
            "rating": 10
        }
    ]
}

В чем может быть проблема?


Ответы (0 шт):