Javascript 使用“时出现错误”；“使用效果”；在功能组件中

我试图使用UseEffect react钩子，但出现错误： React Hook“useffect”在函数“cackpoint”中调用，该函数既不是React函数组件，也不是自定义React Hook函数

import React, { useEffect } from "react";
import styled from "styled-components";
import "./cockpit.css";

// it is a css code
const StyledButton = styled.button`
  background-color: ${props => (props.alt ? "red" : "green")};
  border: 1px solid blue;
  padding: 8px;

  &:hover {
    background-color: ${props => (props.alt ? "salmon" : "lightgreen")};
    color: black;
  }
`;

const cockpit = props => {
  useEffect(() => {
    console.log("in useEffect");
  });

  const classess = [];
  if (props.persons.length <= 2) {
    classess.push("red");
  }
  if (props.persons.length <= 1) {
    classess.push("bold");
  }

  return (
    <div>
      <h1>{props.title}</h1>
      <p className={classess.join(" ")}>Hi, I am React App</p>
      <StyledButton
        key="B1"
        alt={props.showPerson}
        onClick={props.switchNameHandler}
      >
        Switch Name
      </StyledButton>
      <StyledButton
        alt={props.showPerson}
        key="B2"
        onClick={props.togglePersonHandler}
      >
        Toggle Name
      </StyledButton>
    </div>
  );
};

export default cockpit;

---

React挂钩只能在功能组件顶部或自定义挂钩中使用。不能在函数中使用钩子。检查。

React，不将

驾驶舱

识别为组件，因为所有定制组件

要解决这个问题，只需将组件的名称大写即可

"dependencies": {
    "@react-native-community/cli": "^4.10.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "radium": "^0.26.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-native": "^0.63.2",
    "react-native-version-update": "^0.2.7",
    "react-scripts": "3.4.1",
    "styled-components": "^5.1.1"
}