尝试实现useEffect时发生了一个奇怪的错误

Question

我试图在返回几个元素的驾驶舱函数中使用use效应，但我得到了这个奇怪的错误，说“第6行： React Hook”use效应在函数“驾驶舱”中被称为“驾驶舱”，它既不是React函数组件，也不是自定义的React Hook函数反应-钩子/钩子规则”。

但我的座舱组件肯定是一个功能？

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

//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 2

根据反应文档用户定义的组件必须大写！

如果您仅使用react，则可以定义以小写字母开头的组件函数名，但您是否注意到，在渲染中使用组件时，您将其用作“导入源”/等等。因此，如果您确实有一个以小写字母开头的组件，请在JSX中使用它之前将其分配给大写变量。

但是如果您在该组件中使用带有react的钩子，那么您的组件必须大写。我也看过我的课程。那个家伙对名为component的鸡尾酒很满意，但我认为这与react和hook的版本有关！

我再次注意到您正在使用css模块。您是否设置了使用css模块作为课程的配置？？我必须提到的是，您可以使用css模块而无需运行“npm run eject”，这些复杂的config as React 2支持css模块，您只需更改的扩展名即可。css到。单元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 3

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