尝试实现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

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