React Hooks调用报错：仅能在函数组件内部调用的问题排查

问题根源 #

嘿，我一眼就找到问题啦！你在类组件App的render方法里直接调用了函数组件Playground()，这是完全错误的用法！React要求函数组件必须作为JSX元素被渲染，而不是像普通函数那样直接执行。当你直接调用Playground()时，里面的useState并没有在React管理的函数组件上下文里运行，自然就触发了Hooks的规则报错。

修正后的代码 #

把render方法里的Playground()替换成JSX元素<Playground />就行，修改后的代码如下：

import React from 'react';
import { hot } from 'react-hot-loader';
import Playground from '../playground/index';

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Hello World</p>
        {/* 这里要以JSX元素形式渲染组件，而非直接调用函数 */}
        <Playground />
      </div>
    );
  }
}

export default hot(module)(App);

为什么这样能解决问题？ #

当你用<Playground />的方式渲染时，React会识别这是一个组件，然后在正确的组件上下文环境中执行Playground函数。此时里面的useState调用完全符合Hooks的规则——在函数组件的顶层作用域里执行，不会再触发报错。

另外你提到已经更新了所有React相关依赖，版本问题应该已经排除，只要修正组件的渲染方式就能正常运行啦。

内容的提问来源于stack exchange，提问作者Marcos Collado