Блог

Главная - Вопросы по программированию - axios не может получить общедоступную папку / [name].json в reactjs

axios не может получить общедоступную папку / [name].json в reactjs

#reactjs #axios

#reactjs #axios

Вопрос:

Это моя общедоступная папка

 public/
   assets/
   src/
   items.json
   index.html
src/
  layout/
     Items/ items.tsx - useEffect works fine
     Overview/ Overview.tsx  - useEffect does not work
index.tsx
package.json

Это мой обзор.tsx

  import React, { useEffect, useState } from 'react'
    import axios from 'axios';
    
    function Overview(props: any): JSX.Element  {
    
        const [items, setItems] = useState([])
        useEffect(() => {
            axios.get('items.json')
                .then(res => setItems(res.data))
                .catch(err => console.log(err))
        }, []);
    
        return ( 
          <div>
              //JSX Goes here
          </div>
         );
    }

Мой обзор.tsx имеет тот же код, что и моя другая страница, но это то, что я получаю в items.json в инструментах разработки

Заголовки

 Request URL: http://localhost:3000/item/items.json
Request Method: GET
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade

Предварительный просмотр

 Cannot GET /item/items.json

Это мой Items.tsx в отдельной папке, и этот блок работает нормально

 const [items, setItems] = useState([])

useEffect(() => {
    axios.get('items.json')
        .then(res => setItems(res.data))
        .catch(err => console.log(err))
}, []);

Комментарии:

1. Вероятно, вы сейчас находитесь на /item странице. Вы должны выполнить запрос относительно вашего домена, например /items.json .

2. Я извлекаю данные из своей общедоступной папки, я предполагаю, что нужно поместить только axios.get('items.json')

3. Сейчас HTTP не работает, если вы не добавляете / , вы делаете это относительно вашего текущего пути (который http://localhost:3000/item )

4. но мой Items.tsx работает очень хорошо, у них тот же код и даже каталог. как не удалось моему Overview.tsx получить те же данные.

5. Потому что ваш обзор, вероятно, находится на вашей корневой странице, а страница элементов — нет

Ответ №1:

Просто измените свою функцию axios на это:

 axios.get('/items.json')
  .then(res => setItems(res.data))
  .catch(err => console.log(err))

поскольку вы используете относительный путь, он будет извлекаться из /currentPath/items.json
но если вы используете /items.json , axios извлекает ваш файл json из root/items.json