Я не могу собрать данные из API с помощью Axios + React - PullRequest
Новая
       2

Я не могу собрать данные из API с помощью Axios + React

0 голосов
/ 10 октября 2019

Я начинающий с React. У меня есть 2 разных случая, когда я использую React Hooks, и я не могу правильно получить данные из своего локального API.

Случай 1: 

    export const RegisterT = () => {

        const [test, setTest] = useState()

        const addrState = {}

        axios.get('http://127.0.0.1:3333/states', { addrState })
         .then(res => {

            setTest(res.data)

            console.log(test)

        })

    ...

    }

Он работает с состоянием testправильно отображать контент из API, но я не знаю, почему / как Axios продолжает называть API бесконечностью - бесконечно. (PS: при первом же вызове он возвращает undefined, затем при следующем работает). Что я делаю не так?

Чтобы исправить это, я пытался использовать useEffect вот так (Случай 2): 

export const RegisterT = () => {

    const [test, setTest] = useState()

    const addrState = {}

    useEffect(() => {

        axios.get('http://127.0.0.1:3333/states', { addrState })
            .then(res => {

                setTest(res.data)

                console.log(test);

            })

    }, [])

...

}

Теперь Axios работает только один раз, но данные не поступают из API. Может быть, я должен использовать async / wait для этого случая, но я не могу заставить его работать. Кто-нибудь знает, как это исправить (Случай 1 и / или Случай 2)?

Спасибо.

Ответы [ 2 ]

2 голосов
/ 10 октября 2019

Обновление состояния является асинхронной операцией. Таким образом, state действительно не обновляется до следующей визуализации компонента. Если вы хотите захватить правильное состояние, вы можете либо console.log(res.data), либо обернуть его внутри хука useEffect с test в качестве зависимости. 

export const RegisterT = () => {

    const [test, setTest] = useState()

    const addrState = {}

   // effect only runs when component is mounted
    useEffect(() => {
        axios.get('http://127.0.0.1:3333/states', { addrState })
            .then(res => {
                setTest(res.data);
            });

    }, []);
    
    // effect runs whenever value of test changes
    useEffect(() => {
        console.log(test);
    }, [test]); 

}

Таким образом гарантируется, что console.log будет работать при обновлении значения test.

Также причина, по которой вызывается запрос APIоднажды вы ничего не упомянули в массиве зависимостей. [] пустой массив зависимостей запускает эффект при первом монтировании компонента.

async/await - это просто оболочка вокруг Promise объекта. Таким образом, они будут вести себя так же.

1 голос
/ 10 октября 2019

Решение с useEffect хорошо. Если вы не используете его, каждый рендер вызовет запрос. Это то же самое, если вы положите туда console.log с любой информацией. Причина, по которой вы не видите данные в useEffect, заключается в том, что значение состояния обновляется не в текущем рендере, а в следующем, который вызывается установщиком состояния. Переместите console.log(test); после useEffect, чтобы увидеть данные. При инициализации он будет undefined, но при следующем рендеринге он должен содержать данные из запроса.

...