自定义的hook不是一个函数吗？

Question

我正在尝试创建一个 SessionProvider 以避免 propdrilling 并在全局范围内为我的组件保留会话。

但它说 useSession 不是一个函数，给出了什么？

contexts\SessionContext.js: TypeError: (0 , _hooks_useSession__WEBPACK_IMPORTED_MODULE_2__.useSession) is not a function

我的自定义挂钩（useSession.js）：

import { useState } from 'react'

function useSession(isLoggedInState) {

    const [isLoggedIn, setIsLoggedIn] = useState(isLoggedInState);

    return { isLoggedIn, setIsLoggedIn, }
}

export default useSession;

我的提供者（SessionContext.js）：

import React, { createContext, useState } from 'react'
import { useSession } from '../hooks/useSession'

const SessionContext = createContext();

function SessionProvider({ children, isLoggedin = false }) {

    const { isLoggedIn, setIsLoggedIn } = useSession(isLoggedin);

    return (
        <SessionContext.Provider value={isLoggedIn, setIsLoggedIn}>{children}</SessionContext.Provider>
    )
}

export { SessionProvider, SessionContext };

我已经在 _app.js 中使用了我的应用程序，然后在 Home (index.js) 中我尝试在那里使用它：

import React from 'react'
import { Text, TextContainer } from 'react-md'

import { useContext } from "react";
import { SessionContext } from "../contexts/SessionContext";

export default function Home() {

  const { isLoggedIn, setIsLoggedIn } = useContext(SessionContext);

  return (

    <TextContainer>
      <Text type="headline-4">Hello, world!</Text>
    </TextContainer> 
  )
}

有人看出我哪里错了吗？

Answer 1

您需要更改在 SessionContext.js 中导入“useSession”挂钩的方式。

它应该像这样导入（不带大括号），因为您将其导出为默认组件。

import useSession from '../hooks/useSession'