使用 API 和 React Hooks 重新加载页面时出错

Question

我有这个组件，它工作正常，但只有一次。如果我重新加载，我有一个未定义的错误。

我的组件：

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(null)

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

    return (
        <section>
            {userWallet.salaire1}
        </section>
    )
}

第一次加载的结果： userWallet result

然后，我有这个错误：

TypeError: Cannot read property 'salaire1' of null

为什么 console.log 可以工作，而不是在 JSX 中？

谢谢

Answer 1

您可以将可选链接与 userWallet?.salaire1 一起使用。或处理三元条件，如 userWallet.salaire1 && userWallet.salaire1 在这种情况下，您有预定义的状态值 userWallet 为空。因此 UI 无法呈现未定义的属性，因此您的屏幕为空白并提示错误

实际上你的控制台工作，但它的日志返回两次，第一个是 null 然后显示的数据。

希望我的回答能帮助你理解你的问题:)