未捕获的不变违规：只能在函数组件的 body 内部调用挂钩

Question

正如标题所说，我似乎不能使用钩子

我知道你们中的一些人会尝试告诉我这是重复的，但并不是我见过的所有问题似乎都没有人问 使用导入的功能组件的正确方法是什么 我尝试渲染的组件。

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

class App extends React.Component {
  render() {
    Playground();
    return (
      <div>
        <p>Hello World</p>
      </div>
    );
  }
}

export default hot(module)(App);

我的开发依赖：

我把它们包括在内是因为我在其他答案中看到人们声称是由于版本（我已经更新了所有明智的反应）

"devDependencies": {
    "sass-loader": "7.1.0",
    "sass": "*",
    "@babel/cli": "7.1.5",
    "@babel/core": "7.1.5",
    "@babel/plugin-proposal-class-properties": "7.1.0",
    "@babel/plugin-syntax-dynamic-import": "7.0.0",
    "@babel/preset-env": "7.1.5",
    "@babel/preset-react": "7.0.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "css-loader": "1.0.1",
    "eslint": "5.12.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.12.3",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.3.1",
    "jest": "23.6.0",
    "jest-dom": "2.1.1",
    "node-sass": "4.11.0",
    "node-sass-chokidar": "1.3.4",
    "prettier": "1.15.2",
    "pretty-quick": "1.8.0",
    "react-axe": "3.0.2",
    "react-testing-library": "5.2.3",
    "style-loader": "0.23.1",
    "webpack": "4.25.1",
    "webpack-bundle-analyzer": "3.0.3",
    "webpack-cli": "3.1.2",
    "webpack-dev-server": "3.1.10",
    "webpack-merge": "4.1.4"
  }

以及我尝试导入的功能组件：

import React, { useState } from 'react';

export default function Playground() {
  const [text, setText] = useState('');
  const [checked, setCheck] = useState(false);

  return (
    <section>
      <input type="text" value={text} onChange={e => setText(e.target.value)} />
      <input
        type="checkbox"
        value={checked}
        onChange={e => setCheck(e.target.value)}
      />
      <ul>
        <li>{text}</li>
        <li>{checked.toString()}</li>
      </ul>
    </section>
  );
}

Answer 1

使用函数组件的正确方法与使用 class 组件的正确方法没有什么不同。你不应该尝试调用你的组件函数——就像你不创建你的 classes 的实例一样——你只是在你的 JSX 中使用它。

通过调用你的组件函数，你实质上将它视为一个自定义钩子（自定义钩子只是一个使用 React 内置钩子的函数，如 useState）returns React 元素。这会导致 React 抱怨，因为您是从 class 组件的渲染方法而不是从函数组件的主体调用自定义钩子。

下面是使用 Playground 组件的可能方法：

import React from 'react';
import Playground from '../playground/index';

class App extends React.Component {
  render() {
    return (
      <Playground/>
    );
  }
}

未捕获的不变违规：只能在函数组件的 body 内部调用挂钩

Uncaught Invariant Violation: Hooks can only be called inside the body of a function component

import

reactjs

react-hooks