无法解构“对象（...）（...）”的属性“currentUser”，因为它为空答案

【问题标题】：Cannot destructure property 'currentUser' of 'Object(...)(...)' as it is null无法解构“对象（...）（...）”的属性“currentUser”，因为它为空
【发布时间】：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;

下面的错误截图

感谢任何帮助。

【问题讨论】：

标签： reactjs next.js react-context use-context

【解决方案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;

【讨论】：