Une erreur étrange se produit lors de la tentative d'implémentation de useEffect

Question

J'essaie d'utiliser useEffect à l'intérieur de ma fonction de cockpit qui retourne quelques éléments, mais je reçois cette erreur étrange en disant que "Line 6: React Hook" useEffect "est appelé dans la fonction" cockpit " msgstr "qui n'est ni un composant de fonction React ou un React Hook function react-hooks/rules-of-hooks").

Mais mon composant de cockpit est sûrement une fonction?

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

J'ai également rencontré le même problème et j'ai pu le résoudre en mettant en majuscule le nom du composant. Je ne sais pas comment fonctionne le code de l'instructeur udemy sans ce changement. Joindre sa capture d'écran .