javascript - 带有 useContext 的 HOC。无效的挂钩调用。Hooks 只能在函数组件的主体内部调用

Question

我正在尝试使用 MaterialUI 的 Snackbar 编写一个 HOC，以便能够在任何网络故障中显示错误。出现以下错误，有人可以帮忙：

react-dom.development.js:14724 未捕获的错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一而发生：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 您可能违反了 Hooks 规则
3. 你可能在同一个应用程序中拥有多个 React 副本

import React from 'react'
import Snackbar from '@material-ui/core/Snackbar'

const SnackbarContext = React.createContext(null)

const withSnackbar = (OriginalComponent) => {
  function componentWithSnackbarContext() {
    const [state, setState] = React.useState({
      open: false,
      message: 'Some network error occurred',
    })

    const { open, message } = state

    const handleNetworkFail = (messageText) => () => {
      setState({ open: true, message: messageText })
    }

    const handleClose = () => {
      setState({ ...state, open: false })
    }

    return (
      <>
        <SnackbarContext.Provider value={{ handleNetworkFail, handleClose }}>
          <OriginalComponent />
        </SnackbarContext.Provider>
        <Snackbar
          anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
          open={open}
          onClose={handleClose}
          message={message}
        />
      </>
    )
  }
  return componentWithSnackbarContext
}

export default withSnackbar

Answer 1

lint 规则假定以大写字母开头的函数是组件，而以小写字母开头的不是。解决方法是更改componentWithSnackbarContext​​为ComponentWithSnackbarContext