在功能组件中，useContext在console.log中工作，但在呈现时返回错误
在功能组件中，useContext在console.log中工作，但在呈现时返回错误
提问于 2020-12-26 07:39:39
我到处看了看，但找不到确切的答案。我已经用<AuthContext>包好了我的应用程序，我已经通过了道具测试并尝试了return <div>{props.user.username}</div>，但是什么都不起作用，只是一次又一次地得到相同的TypeError: Cannot read property 'username' of undefined。我在这里做了什么根本错误的事情，还是有一个简单的答案？
import React, { useContext } from "react";
import { AuthContext } from "../../context/auth";
const HeaderBar = (props) => {
const {user: { user }} = useContext(AuthContext);
if (user) {
console.log(user.username); // Returns user in console log, so everything seems to be working fine
}
return <div>{user.username}</div> // Throws an error "TypeError: Cannot read property 'username' of undefined"
}
export default HeaderBar回答 1
Stack Overflow用户
发布于 2020-12-26 09:36:52
这看起来很奇怪。然而，我可能有一个解释(但我不确定这是否能解决你的问题)。
您的应用程序中可能有一些正在更改的内容，并使该组件重新呈现。这意味着您可以在控制台中拥有多个日志。可以在第一次呈现组件时定义user，然后立即更改(由于外部原因?)，并将user变量更改为undefined。
以下是一些可用于调试的提示：
console.log(user.username)
// throw an error if user is not defined, execution is stopped
console.log(user?.username)
// returns undefined if user is not defined
console.log(user?.username ?? "username not defined")
// return "username not defined" only if user is undefined or username is (undefined or null)使用第二个或第三个语法可能会帮助您避免错误。您可以尝试：
const HeaderBar = (props) => {
const {user: { user }} = useContext(AuthContext);
if (user) {
console.log(user?.username ?? "username not defined");
}
return <div>{user?.username ?? "username not defined"}</div> // Cannot throw an error
}此答案不会解决您的问题，但我希望它能帮助您！;)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65452630
复制相关文章
相似问题
腾讯云开发者
