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

【问题标题】：I cannot collect data from API using Axios + React我无法使用 Axios + React 从 API 收集数据
【发布时间】：2020-02-07 06:53:43
【问题描述】：

我是 React 的初学者。我有 2 种不同的情况，我使用 React Hooks 无法正确接收来自本地 API 的数据。

案例一：

    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：第一次调用它返回未定义，然后下一个调用它工作）我做错了什么？

为了解决这个问题，我尝试像这样使用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。也许我应该在这种情况下使用异步/等待，但我不能让它工作。有谁知道如何解决这个问题（案例 1 或/和案例 2）？

谢谢。

【问题讨论】：

我认为Case2是正确的，但是记住更新状态是一个异步操作，这意味着当你尝试console.log时test仍然没有更新，请尝试移动console.log在useEffect 钩子之外再次检查。

标签： reactjs axios use-effect

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

【讨论】：