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

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>
)
}

第一次加载时的结果：用户钱包结果

然后，我有一个错误：

TypeError: Cannot read property 'salaire1' of null

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

谢谢

Answer 1

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

实际上，您的控制台可以工作，但它会返回两次日志，第一次为空，然后显示数据。

我希望我的回答能帮助理解你的问题：(