尝试实现 useEffect 时出现奇怪的错误

Question

我正在尝试在我的驾驶舱函数中使用 useEffect returns 几个元素，但我收到这个奇怪的错误提示 "Line 6: React Hook "useEffect" 在函数 "cockpit" 中调用，它既不是 React 函数组件也不是自定义 React Hook 函数 react-hooks/rules-of-hooks"。

但我的驾驶舱组件肯定是一个函数吗？

import React, { useEffect } from 'react'

import classes from './Cockpit.css'

const cockpit = (props) => {
  useEffect(() => {
    console.log('I work!')
  })

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

  if (props.persons.length <= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.persons.length <= 1) {
    assignedClasses.push(classes.bold)
  }

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assignedClasses.join(' ')}>HELLO, HELLO!</p>
      <button
        className={btnClass}
        onClick={props.clicked}>Click me!</button>
    </div>
  )
}


export default cockpit

Answer 1

仅供参考，组件名称应以大写字母开头

Answer 2

//This is the exact solution

import React, { useEffect } from 'react';

import classes from './Cockpit.css';

const Cockpit = props => {
  useEffect(() => {
    console.log('[Cockpit.js] useEffect');
    // Http request...
    setTimeout(() => {
      alert('Saved data to cloud!');
    }, 1000);
    return () => {
      console.log('[Cockpit.js] cleanup work in useEffect');
    };
  }, []);

  useEffect(() => {
    console.log('[Cockpit.js] 2nd useEffect');
    return () => {
      console.log('[Cockpit.js] cleanup work in 2nd useEffect');
    };
  });

  // useEffect();

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

  if (props.persons.length <= 2) {
    assignedClasses.push(classes.red); // classes = ['red']
  }
  if (props.persons.length <= 1) {
    assignedClasses.push(classes.bold); // classes = ['red', 'bold']
  }

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assignedClasses.join(' ')}>This is really working!</p>
      <button className={btnClass} onClick={props.clicked}>
        Toggle Persons
      </button>
    </div>
  );
};

export default Cockpit;

// Look out for the identifier names of the const and the export

Answer 3

我也运行遇到了同样的问题，并且能够通过大写组件名称来解决。我不知道如果不进行更改，udemy 讲师的代码将如何工作。附上他的截图。

Answer 4

根据 react 文档 用户定义的组件必须大写 !

如果您只使用 React，那么您可以定义以小写字母开头的组件函数名称，但您是否注意到，当您在渲染中使用该组件时，您将其用作 import Cockpit来自 './bla bla' 。因此，如果您确实有一个以小写字母开头的组件，请在将其用于 JSX 之前将其分配给大写变量。

但是，如果您在该组件中使用 hook 和 react，那么您的组件必须大写。我也看过 Udemy 的课程。那个人对 cocktail 命名组件很满意，但我认为这与 react 和 hook 的版本有关！

我再次注意到您正在使用 css 模块。您是否设置了使用 css 模块作为课程的配置？我必须提到你可以在没有运行 'npm run eject' 的情况下使用 css 模块，这些复杂的配置作为 React 2 支持 css 模块，你只需要将扩展名从 .css 到 .module.css

这是您的干净代码：

import React, { useEffect } from 'react'

import classes from './Cockpit.module.css'

const Cockpit = (props) => {
  useEffect(() => {
    console.log('I work!')
  })

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

  if (props.persons.length <= 2) {
    assignedClasses.push(classes.red)
  }
  if (props.persons.length <= 1) {
    assignedClasses.push(classes.bold)
  }

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assignedClasses.join(' ')}>HELLO, HELLO!</p>
      <button
        className={btnClass}
        onClick={props.clicked}>Click me!</button>
    </div>
  )
}


export default Cockpit

Answer 5

import React, { useEffect, useRef, useContext } from 'react';
import classes from './Cockpit.css';
import AuthContext from '../../context/auth-context';

const Cockpit = props => {
  const toggleBtnRef = useRef(null);
  const authContext = useContext(AuthContext);

  console.log(authContext.authenticated);

  useEffect(() => {
    console.log('[Cockpit.js] useEffect');
    // Http request...
    // setTimeout(() => {
    //   alert('Saved data to cloud!');
    // }, 1000);
    toggleBtnRef.current.click();
    return () => {
      console.log('[Cockpit.js] cleanup work in useEffect');
    };
  }, []);

  useEffect(() => {
    console.log('[Cockpit.js] 2nd useEffect');
    return () => {
      console.log('[Cockpit.js] cleanup work in 2nd useEffect');
    };
  });

  // useEffect();

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

  if (props.personsLength <= 2) {
    assignedClasses.push(classes.red); // classes = ['red']
  }
  if (props.personsLength <= 1) {
    assignedClasses.push(classes.bold); // classes = ['red', 'bold']
  }

  return (
    <div className={classes.Cockpit}>
      <h1>{props.title}</h1>
      <p className={assignedClasses.join(' ')}>This is really working!</p>
      <button ref={toggleBtnRef} className={btnClass} onClick={props.clicked}>
        Toggle Persons
      </button><hr/>
      <button onClick={authContext.login}>Log in</button>
    
    </div>
  );
};

export default React.memo(Cockpit);

只需删除您的驾驶舱组件代码并复制我在此答案中提供的代码

尝试实现 useEffect 时出现奇怪的错误

A weird error occurring when trying to implement useEffect

reactjs

react-hooks