无法解构“对象（...）（...）”的属性“currentUser”，因为它为空
Posted
技术标签:
【中文标题】无法解构“对象（...）（...）”的属性“currentUser”，因为它为空【英文标题】：Cannot destructure property 'currentUser' of 'Object(...)(...)' as it is null 【发布时间】：2020-09-08 22:17:21 【问题描述】：当我在 Next.js 中使用 react 中的 useContext() 挂钩时，我收到错误“无法解构 'Object(...)(...)' 的属性 'currentUser'，因为它为空”。
// Other imports
import CurrentUserContext from "../../contexts/current-user/current-user.context";
class Layout extends React.Component
constructor()
super();
this.state =
currentUser: null,
;
unsubscribeFromAuth = null;
componentDidMount()
// Auth code
componentWillUnmount()
// unsubscribe code
render()
const children, title = this.props;
return (
<React.Fragment>
<Head>
<title>title</title>
</Head>
<CurrentUserContext.Provider value=this.state.currentUser>
<Header />
</CurrentUserContext.Provider>
children
<Footer />
</React.Fragment>
);
export default Layout;
这里是错误发生的地方
// Other imports
import CurrentUserContext from "../../contexts/current-user/current-user.context";
import useContext from "react";
const Header = () =>
const currentUser = useContext(CurrentUserContext);
return (
// Header Jsx
);
;
export default Header;
这就是我创建上下文文件的方式
import createContext from "react";
const CurrentUserContext = createContext(undefined);
export default CurrentUserContext;
下面的错误截图
感谢任何帮助。
【问题讨论】：
【参考方案1】：您的上下文的初始值只是null，并且您的上下文中没有键currentUser。
this.state =
currentUser: null,
;
<CurrentUserContext.Provider value=this.state.currentUser> // just null
为了能够在您的上下文中解构 currentUser，您可以这样做：
<CurrentUserContext.Provider
value=
currentUser: this.state.currentUser
>
【讨论】：
另外这个链接确保上下文包裹在正确的位置ankurraina.medium.com/…【参考方案2】：您的上下文值不是要解构的对象，它只是一个值（当前为 null），即上下文值只是 this.state.currentUser 的值，而不是 currentUser: this.state.currentUser 。您可以直接访问它，无需解构。
// Other imports
import CurrentUserContext from "../../contexts/current-user/current-user.context";
import useContext from "react";
const Header = () =>
const currentUser = useContext(CurrentUserContext); // <-- Remove the curly brackets
return (
// Header Jsx
);
;
export default Header;
【讨论】：
以上是关于无法解构“对象（...）（...）”的属性“currentUser”，因为它为空的主要内容，如果未能解决你的问题，请参考以下文章
为什么解构与Javascript（ES6）中的经典赋值不同？
反应使用上下文。无法解构“对象（...）（...）”的属性“currentChatbotInEdit”，因为它未定义。我该如何解决？