在功能组件中，useContext 在 console.log 中工作，但在渲染时返回错误

Posted 2023-04-14

【中文标题】在功能组件中，useContext 在 console.log 中工作，但在渲染时返回错误

【英文标题】：In functional component useContext works in console.log but returns error on render

【发布时间】：2021-04-03 18:00:21

【问题描述】：

我一直在四处寻找，但找不到明确的答案。我已经用<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

【问题讨论】：

您是否尝试过将用户分配给一个简单的变量而不是立即解构它？看起来您可能误解了数据协定，因为控制台错误表明 user 未定义，或者至少 username 键不在 user 对象中。所以我要检查的第一件事是 user 对象是否按预期返回

这能回答你的问题吗？ Unable to render data in Reactjs

【参考方案1】：

这看起来很奇怪。不过，我可能有一个解释（但我不确定这会解决你的问题）。

您的应用中可能有一些东西正在发生变化，并让该组件重新呈现。这意味着您可以在控制台中有多个日志。 user 可以在组件第一次渲染时定义，并立即更改（出于外部原因？），并将user 变量更改为未定义。

以下是一些可用于调试的技巧：

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)

使用第 2 或第 3 句法可以帮助您避免错误。你可以试试：

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

此答案无法解决您的问题，但希望对您有所帮助！ ;)