我无法使用 Axios + React 从 API 收集数据

Question

我是 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 的内容，但我不知道 why/how Axios 继续调用 API 无穷大 - 无穷无尽. （Ps：第一个调用它 returns 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 or/and 案例 2）？

谢谢。

Answer 1

useEffect的解决方案很好。如果你不使用它，每个渲染器都会调用请求。如果你把任何信息放在那里 console.log 都是一样的。您在 useEffect 中看不到数据的原因是状态的值未在当前渲染中更新，而是在状态的 setter 调用的下一个渲染中更新。将 console.log(test); 移到 useEffect 之后以查看数据。在初始化时它将是 undefined 但在下一次渲染中，它应该包含来自请求的数据。

Answer 2

更新状态是一个异步操作。所以 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 对象的包装器。所以他们会表现得相似。

我无法使用 Axios + React 从 API 收集数据

I cannot collect data from API using Axios + React

reactjs

axios

use-effect