React报错之React Hook 'useEffect' is called in function
2023-02-18 16:41:39 时间
正文从这开始~
总览
为了解决错误"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function",可以将函数名的第一个字母大写,或者使用use
作为函数名的前缀。比如说,useCounter
使其成为一个组件或一个自定义钩子。
这里有个示例用来展示错误是如何发生的。
// App.js
import React, {useEffect, useState} from 'react';
// ?️ Not a component (lowercase first letter)
// not a custom hook (doesn't start with use)
function counter() {
const [count, setCount] = useState(0);
// ⛔️ React Hook "useEffect" is called in function "counter" that
// is neither a React function component nor a custom React Hook function.
// React component names must start with an uppercase letter.
// React Hook names must start with the word "use".
useEffect(() => {
console.log(count);
}, [count]);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
上述代码片段的问题在于,我们在一个函数中使用了useEffect
钩子,而这个函数不是一个组件,因为它以小写字母开头,也不是一个自定义钩子,因为它的名字不是以use
开头。
声明组件
如果你想声明一个组件,请将你的函数的第一个字母大写。
// App.js
import React, {useEffect, useState} from 'react';
// ?️ is now a component (can use hooks)
function Counter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default function App() {
return (
<div>
<Counter />
</div>
);
}
函数名必须以大写字母开头,因为这有助于React区分诸如p
、div
、span
等内置元素和我们定义的组件。
就像文档中所说的:
- 只从React函数组件或自定义钩子中调用Hook
- 只在最顶层使用 Hook
- 不要在循环,条件或嵌套函数中调用 Hook
- 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook
声明自定义钩子
如果你想声明一个自定义钩子,自定义钩子的名称必须以use
开头,比如说useCounter
。
import React, {useEffect, useState} from 'react';
// ?️ is a custom hook (name starts with use)
function useCounter() {
const [count, setCount] = useState(0);
useEffect(() => {
console.log(count);
}, [count]);
return [count, setCount];
}
export default function App() {
const [count, setCount] = useCounter();
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
自定义钩子的名字必须以use
开头,这样React才能识别你的函数是一个自定义钩子。
总结
为了解决"React Hook 'useEffect' is called in function that is neither a React function component nor a custom React Hook function"的错误,确保只从React函数组件或自定义钩子中调用钩子。
相关文章
- 国际计费系统基于Sharding-Proxy大数据迁移方案实践
- 文盘Rust -- 配置文件解析
- 重构指标之如何监控代码圈复杂度
- Acer宏碁笔记本触摸板失效解决方法
- 节省50%成本!京东云重磅发布新一代混合CDN产品
- 电商库存系统的防超卖和高并发扣减方案
- mysql 最大建议行数2000w,靠谱吗?
- 数据泄漏、删除事件频发,企业应如何构建安全防线?
- APP常用跨端技术栈深入分析
- 杂牌机搞机之旅(一)——获得root权限(刷入magisk)
- 京东云分布式链路追踪在金融场景的最佳实践
- 数千个数据库、遍布全国的物理机,京东物流全量上云实录 | 卓越技术团队访谈录
- 京东云联合Forrester咨询发布混合云报告 云原生成为驱动产业发展新引擎
- IDEA设置显示中文文档API方法说明
- 京东荣获“中国智能科学技术最高奖”——吴文俊人工智能科学技术奖
- 京东云:扎根数智供应链 推进千行百业数实融合
- 算法学习——二分查找(折半查找)
- IDEA解决crtl+space与搜狗输入法冲突
- windows10系统盘瘦身
- HbuilderX 常用快捷键