0

当我在 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;

下面的错误截图 无法解构“对象（...）（...）”的属性“currentUser”，因为它为空

任何帮助表示赞赏。

4

2 回答 2

2

您的上下文的初始值是 justnull并且您的上下文中没有键currentUser。

this.state = {
  currentUser: null,
};

<CurrentUserContext.Provider value={this.state.currentUser}> // just null

为了能够currentUser在您的上下文中解构 a ，您可以这样做：

<CurrentUserContext.Provider
  value={{
    currentUser: this.state.currentUser
  }}
>
于 2020-05-22T06:15:24.850 回答
1

您的上下文值不是要解构的对象，它只是一个值（当前为空），即上下文值只是 的值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;
于 2020-05-22T06:16:11.640 回答