在功能组件中使用"useEffect"时出错



我试图使用UseEffect react钩子,但出现错误:React Hook";useEffect";在函数"中被调用;驾驶舱";既不是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;

有谁能帮我理解我为什么会出错吗。

package.json 中的依赖项

"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"
}
React不将cockpit识别为组件,因为所有自定义组件都需要大写。

要解决此问题,只需将组件Cockpit的名称大写即可。

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

相关内容

  • 没有找到相关文章

最新更新