TypeError：__WEBPACK_IMPORTED_MODULE_0_react __。useContext不是一个函数

Question

需要帮助弄清楚“上下文挂钩”为什么会出错。是我的错还是错误。

我使用React +打字稿。这是一个简单的组件，我想在其中访问两个上下文。我不知道问题出在哪里。我要附加的文件不带上下文挂钩，而文件带有上下文挂钩会出错。

---

Chrome中显示的错误（纱线启动）

TypeError: __WEBPACK_IMPORTED_MODULE_0_react__.useContext is not a function
new ButtonContractExpand
E:/.../button-contract-expand.tsx:12
   9 | }
  10 | 
  11 | export default class ButtonContractExpand extends React.Component<Props, {}> {
> 12 |   private appStateContextHook = React.useContext(jayannAppStateContext)
  13 |   private appStoreContextHook = React.useContext(jayannAppStoreContext)
  14 | 
  15 |   constructor(
View compiled
▶ 23 stack frames were collapsed.
./src/index.tsx
E:/.../src/index.tsx:7
   4 | import './index.css'
   5 | import registerServiceWorker from './registerServiceWorker'
   6 | 
>  7 | ReactDOM.render(
   8 |   <App />,
   9 |   document.getElementById('root') as HTMLElement,
  10 | )
View compiled
▶ 6 stack frames were collapsed.
This screen is visible only in development. It will not appear if the app crashes in production.
Open your browser’s developer console to further inspect this error.

---

通过钩子使用上下文的按钮会带来“问题标题”错误

import * as React from 'react'
import { FormattedHTMLMessage } from 'react-intl'
import { jayannAppStateContext } from 'src/App'
import { jayannAppStoreContext } from 'src/App'

interface Props {
  dataTarget: string
  ariaControls: string
}

export default class ButtonContractExpand extends React.Component<Props, {}> {
  private appStateContextHook = React.useContext(jayannAppStateContext)
  private appStoreContextHook = React.useContext(jayannAppStoreContext)

  constructor(
    props: Props,
  ) {
    super(props)
  }

  private button = {
    state: 'expand',
    text: (state: string): JSX.Element =>
      state === 'contract'
        ? <FormattedHTMLMessage id="common.button.contract" />
        : <FormattedHTMLMessage id="common.button.expand" />,
    switchState: (state: string): string =>
      state === 'contract'
        ? 'expand'
        : 'contract',
  }

  private icon = {
    class: (state: string, contract: string, expand: string) =>
      state === 'contract'
        ? contract
        : expand,
  }

  public render = () =>
    <button
      className={this.appStoreContextHook.buttonContractExpand}
      type="button"
      data-toggle="collapse"
      data-target={this.props.dataTarget}
      aria-expanded="false"
      aria-controls={this.props.ariaControls}
      onClick={() => {
        this.button.state = this.button.switchState(this.button.state)
        this.appStateContextHook.reRenderAppState()
      }}
    >
      {this.button.text(this.button.state)}
      <i className={this.icon.class(this.button.state, this.appStoreContextHook.fontawesomeIconContractClassName, this.appStoreContextHook.fontawesomeIconExpandClassName)} />
    </button>
}

---

使用上下文且无错误的按钮

import * as React from 'react'
import { FormattedHTMLMessage } from 'react-intl'
import { jayannAppStateContext } from 'src/App'
import { jayannAppStoreContext } from 'src/App'

interface Props {
  dataTarget: string
  ariaControls: string
}

export default class ButtonContractExpand extends React.Component<Props, {}> {

  constructor(
    props: Props,
  ) {
    super(props)
  }

  private button = {
    state: 'expand',
    text: (state: string): JSX.Element =>
      state === 'contract'
        ? <FormattedHTMLMessage id="common.button.contract" />
        : <FormattedHTMLMessage id="common.button.expand" />,
    switchState: (state: string): string =>
      state === 'contract'
        ? 'expand'
        : 'contract',
  }

  private icon = {
    class: (state: string, contract: string, expand: string) =>
      state === 'contract'
        ? contract
        : expand,
  }

  public render = () =>
    <jayannAppStateContext.Consumer>
      {shadowAppStateContextValue =>
        <jayannAppStoreContext.Consumer>
          {shadowAppStoreContextValue =>
            <button
              className={shadowAppStoreContextValue.buttonContractExpand}
              type="button"
              data-toggle="collapse"
              data-target={this.props.dataTarget}
              aria-expanded="false"
              aria-controls={this.props.ariaControls}
              onClick={() => {
                this.button.state = this.button.switchState(this.button.state)
                shadowAppStateContextValue.reRenderAppState()
              }}
            >
              {this.button.text(this.button.state)}
              <i className={this.icon.class(this.button.state, shadowAppStoreContextValue.fontawesomeIconContractClassName, shadowAppStoreContextValue.fontawesomeIconExpandClassName)} />
            </button>
          }
        </jayannAppStoreContext.Consumer>}
    </jayannAppStateContext.Consumer>
}

---

package.json

{
  "homepage": ".",
  "name": "dlaniewidomych.s2projekt.pl",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@types/react-intl": "^2.3.14",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-facebook": "^6.0.15",
    "react-intl": "^2.7.2",
    "react-scripts-ts": "^3.1.0"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  },
  "devDependencies": {
    "@types/jest": "^23.3.10",
    "@types/node": "^10.12.12",
    "@types/react": "^16.7.13",
    "@types/react-dom": "^16.0.11",
    "babel-plugin-react-intl": "^3.0.1",
    "typescript": "^3.2.2"
  }
}