尝试在 ReactDOM.render 中使用 React Hooks。这样对吗？

Question

所以我得到 dispatcher.useEffect is not a function

react.development.js:1463 Uncaught TypeError: dispatcher.useEffect is not a function
at useEffect (react.development.js:1463)
at Preload (VM75697 Preload.js:40)
at ProxyFacade (react-hot-loader.development.js:677)
at mountIndeterminateComponent (react-dom.development.js:14563)
at beginWork (react-dom.development.js:15063)
at performUnitOfWork (react-dom.development.js:17820)
at workLoop (react-dom.development.js:17860)
at HTMLUnknownElement.callCallback (react-dom.development.js:149)
at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
at invokeGuardedCallback (react-dom.development.js:256)

我正在尝试在 render 方法中使用函数：

render(
  <Root store={store} history={history} />,
  document.getElementById('app'),
)

我的 Root.js 文件看起来像：

import React from 'react'
import { hot } from 'react-hot-loader'
import { Provider } from 'react-redux'
import { ConnectedRouter } from 'connected-react-router'
import Preload from '../Preload'
import Routes from './Routes'    

const Root = ({ store, history }) => (
  <Provider store={store}>
    <Preload>
      <ConnectedRouter history={history}>
        <Routes />
      </ConnectedRouter>
    </Preload>
  </Provider>
)

export default hot(module)(Root)

最后我在 Preload.js

中使用了 useEffect

import { useEffect } from 'react'
import { connect } from 'react-redux'
import { init } from '../actions'

const Preload = ({
  children,
  token,
  onInit,
}) => {
  useEffect(() => {
    if (token) {
      onInit()
    }
  })

  return children
}

export default connect(
  state => ({
    token: state.security.token,
  }),
  dispatch => ({
    onInit: () => dispatch(init()),
  }),
)(Preload)

大多数对该错误的回答是，人们忘记在 useEffect 中使用函数，但我的情况不是。

Answer 1

嗯，答案很简单。不仅 react，而且 react-dom 也更新到 Beta。

而且 react-redux 的 connect 似乎让我明白了

Uncaught Error: Hooks can only be called inside the body of a function component.

因为 react-redux 仅在 6 版本（目前处于测试阶段）中开始支持挂钩。

尝试在 ReactDOM.render 中使用 React Hooks。这样对吗？

Trying to use React Hooks in ReactDOM.render. Is it right?

reactjs

react-hooks