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

Question

我正在尝试在返回几个元素的我的cockpit函数中使用useEffect，但是我收到这个奇怪的错误，说“第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

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