React 响应多个 console.log

如何解决React 响应多个 console.log

我做了一个功能组件，我的 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）

解决方法

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

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

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