使用多个 console.log 响应响应

Question

我做了一个功能组件，我的 axios 请求响应 2 个未定义和 1 个响应 200。我不明白为什么？

这是我的组件：

import { UidContext } from "../components/AppContext"
import React, { useContext, useEffect, useState } from "react"
import axios from "axios"

export default function Balance() {
    const uid = useContext(UidContext)
    const [userWallet, setUserWallet] = useState()

    useEffect(() => {
        if (uid !== null) {
            axios.get(`${process.env.REACT_APP_API_URL}api/balance/${uid}`)
                .then((res) => (setUserWallet(res.data[0])))
        }
    }, [uid]);

    console.log(userWallet);

    return (
        <section>
            Test
        </section>
    )
}

这是回复： Result

(ps : 我在 App.js 中使用 React Context 来存储用户的 ID)

Answer 1

console.log 将在您的组件每次渲染时运行，并且您的组件每次或道具更改、状态更改或在这种情况下上下文更改时都会重新渲染。所以我相信这就是正在发生的事情：

1. 组件的首次渲染（“安装时”），userWallet 未定义。
2. 组件的第二次渲染（“上下文更改”），uid 由上下文设置，从而触发重新渲染。
3. 第三次渲染（“因为setUserWallet”），userWallet 不是未定义的。

我想指出，我相信您的请求只运行了 1 次。如果你把console.log移到axio promise的thencb，那么你会看到它只运行了1次，除非uid对象经常变化，那么每次uid变化都会再次调用请求