Неопределенное нарушение инварианта: хуки могут вызываться только внутри тела компонента функции - PullRequest
Новая
       5

Неопределенное нарушение инварианта: хуки могут вызываться только внутри тела компонента функции

0 голосов
/ 09 марта 2019

Как говорится в заголовке, я не могу использовать крючки

Я знаю, что некоторые из вас попытаются сказать мне, что это дубликат, но это не во всех вопросах, которые я видел, кажется, никто не спрашивает, каков правильный способ использования импортированного функционального компонента Компонент, который я пытаюсь сделать. 

    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>
  );
}

1 Ответ

1 голос
/ 09 марта 2019

Правильный способ использования компонента функции ничем не отличается от правильного способа использования компонента класса. Вы не должны пытаться вызывать вашу компонентную функцию - точно так же, как вы не создаете экземпляры своих классов - вы просто используете ее в своем JSX.

Вызывая функцию компонента, вы, по сути, рассматриваете ее как пользовательский хук (пользовательский хук - это просто функция, которая использует встроенные хуки React, такие как useState), которая возвращает элементы React. Это заставляет React жаловаться, потому что вы вызываете пользовательский хук из метода рендеринга компонента класса, а не из тела компонента функции.

Вот возможный способ использования компонента Playground: 

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

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