React 常见的报错及解决方法

1、Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons(无效的钩子调用。钩子只能在函数组件的内部调用。这可能是由于以下原因之一)

原因:Hook Api只能在写成组件的主体里面。

解决方法:

复制代码
import { useNavigate } from "react-router-dom";
const Navigate1 = useNavigate(); // 写在这里就是错的
export default Home () {
	const Navigate2 = useNavigate(); // 写在这里就是正确的
	return (
		<div>home</div>
	);
}

2、Unknown property 'class' found, use 'className' instead(class属性是未知的,用className代替)

原因:react中要使用className属性来表示类名。

复制代码
<div className="header active">hello world</div>

3、Warning: Functions are not valid as a React child. This may happen if you return a Component(函数作为React的子组件是无效的)

原因:调用某个方法时忘记加括号

解决办法:就是在方法名后面加上括号()

相关推荐
小墨宝15 分钟前
js 生成pdf 并上传文件
前端·javascript·pdf
HED30 分钟前
用扣子快速手撸人生中第一个AI智能应用!
前端·人工智能
DN金猿35 分钟前
使用npm install或cnpm install报错解决
前端·npm·node.js
丘山子35 分钟前
一些鲜为人知的 IP 地址怪异写法
前端·后端·tcp/ip
志存高远661 小时前
Kotlin 的 suspend 关键字
前端
www_pp_1 小时前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
YuShiYue1 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
天天扭码2 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛2 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
vvilkim2 小时前
React 与 Vue:两大前端框架的深度对比
vue.js·react.js·前端框架