React 响应多个 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 将运行每次您的组件呈现时，并且您的组件每次重新呈现或道具更改，或状态更改或在这种情况下上下文更改。所以我相信这就是正在发生的事情：

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

请注意，我认为您的请求只是运行ning 1 次。如果你把 console.log 移到 axio promise 的 then cb 中，那么你会看到它运行s 只是 1 次，除非 uid 对象经常变化，那么每次 uid更改请求将再次调用

React 响应多个 console.log

React respond with multiple console.log

components

console.log

reactjs

axios

react-hooks