在反应功能组件中使用 useEffect 时出错

Question

我正在学习使用 React Hooks 来管理状态，但我收到错误提示行 5:3：React Hook "useEffect" 在函数 "cockpit" 中调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

这是我的代码

import React, {useEffect} from "react";
import classes from "./Cockpit.module.css";

const cockpit = (props) => {
  useEffect(() => {
    console.log('Cockpit js useEffect');

  });

  const assiginedClasses = [];
  let btnClass = "";
  if (props.showPersons) {
    btnClass = classes.Red;
  }

  if (props.persons.length <= 2) {
    assiginedClasses.push(classes.red);
  }

  if (props.persons.length <= 1) {
    assiginedClasses.push(classes.bold);
  }
  return (
    <div className={classes.Cockpit}>
      <h1>Hi I'm a React App</h1>
      <p className={assiginedClasses.join(" ")}>This is really Working!</p>
      <button className={btnClass} onClick={props.clicked}>
        Toggle Name
      </button>
    </div>
  );
};

export default cockpit;

Answer 1

我觉得useEffect hook更像这样：

useEffect(() => {
  effect
  return () => {
    cleanup
  }
}, [input])

Answer 2

useEffect(() => {
  console.log('Cockpit js useEffect');
}, []); // []: is used for initial state

useEffect(() => {
   console.log('Cockpit js useEffect');
}, [something]); When {something} is changed call print 'Cockpit js useEffect'


useEffect(() => {
  return () => console.log('unmount'); // return and unmount
}, []);

Answer 3

功能组件通常以大写字母开头。所以将名称 'cockpit' 更改为 'Cockpit'

Answer 4

这是来自 https://www.npmjs.com/package/eslint-plugin-react-hooks 的 linter "error"。

具体来自：https://github.com/facebook/react/blob/ddcc69c83b59ef0f895aa5020196e2ae9de36133/packages/eslint-plugin-react-hooks/src/RulesOfHooks.js#L478

isDirectlyInsideComponentOrHook returns 错误，因为组件名称无效。

        const isDirectlyInsideComponentOrHook = codePathFunctionName
          ? isComponentName(codePathFunctionName) ||
            isHook(codePathFunctionName)
          : isForwardRefCallback(codePathNode) || isMemoCallback(codePathNode);

然后你得到这个错误：

            } else if (codePathFunctionName) {
              // Custom message if we found an invalid function name.
              const message =
                `React Hook "${context.getSource(hook)}" is called in ` +
                `function "${context.getSource(codePathFunctionName)}" ` +
                'that is neither a React function component nor a custom ' +
                'React Hook function.' +
                ' React component names must start with an uppercase letter.';
              context.report({node: hook, message});
            }

如果您的函数名称不是以大写字母开头，那么 React 将在您的控制台中显示此 "error"。

Answer 5

删除错误解决后更改了以下行。这段代码是有效的。 1.常量驾驶舱=（道具）=> { 2.导出默认驾驶舱；

替换下行 1. const 驾驶舱 = (道具) => { 2.导出默认驾驶舱;

Answer 6

使用 useEffect 挂钩时，您的主要函数名称应以大写字母开头，使用 Cockpit 而不是 cockpit

在反应功能组件中使用 useEffect 时出错

Error using useEffect in react functional component

javascript

frontend

reactjs

react-hooks

use-effect