React报错之React hook 'useState' is called conditionally
2023-02-18 16:41:39 时间
正文从这开始~
总览
当我们有条件地使用useState
钩子时,或者在一个可能有返回值的条件之后,会产生"React hook 'useState' is called conditionally"错误。为了解决该错误,将所有React钩子移到任何可能油返回值的条件之上。
这里有个例子用来展示错误是如何发生的。
import React, {useState} from 'react';
export default function App() {
const [count, setCount] = useState(0);
if (count > 0) {
return <h1>Count is greater than 0</h1>;
}
// ⛔️ React Hook "useState" is called conditionally.
//React Hooks must be called in the exact same order
// in every component render. Did you accidentally call
// a React Hook after an early return?
const [message, setMessage] = useState('');
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
上述代码片段的问题在于,我们使用的第二个useState
钩子,位于可能有返回值的条件之后。
顶层调用
为了解决该问题,我们必须在最顶层调用React钩子。
import React, {useState} from 'react';
export default function App() {
const [count, setCount] = useState(0);
// ?️ move hooks above condition that might return
const [message, setMessage] = useState('');
// ?️ any conditions that might return must be below all hooks
if (count > 0) {
return <h1>Count is greater than 0</h1>;
}
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
我们把第二个useState
钩子移到了可能返回值的条件之上。
这样就解决了这个错误,因为我们必须确保每次组件渲染时,React钩子都以相同的顺序被调用。
这意味着我们不允许在循环、条件或嵌套函数内使用钩子。
我们绝不应该有条件地调用钩子。
import React, {useState} from 'react';
export default function App() {
const [count, setCount] = useState(0);
if (count === 0) {
// ⛔️ React Hook "useState" is called conditionally.
// React Hooks must be called in the exact same order in every component render.
const [message, setMessage] = useState('');
}
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
上面的代码片段导致了错误,因为我们有条件地调用第二个useState
钩子。
这是不允许的,因为钩子的数量和钩子调用的顺序,在我们的函数组件的重新渲染中必须是相同的。
为了解决这个错误,我们必须把
useState
的调用移到顶层,而不是有条件地调用这个钩子。
就像文档中所说的:
- 只在最顶层使用 Hook
- 不要在循环,条件或嵌套函数中调用 Hook
- 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook
- 在 React 的函数组件中调用 Hook
- 在自定义 Hook 中调用其他 Hook
相关文章
- 交互周期表:网络中心度(Network Centrality)
- ECCV2022 | PCLossNet:不进行匹配的点云重建网络
- Redis
- SQLSERVER 的复合索引和包含索引到底有啥区别?
- SQLSERVER 的主键索引真的是物理有序吗?
- SQLSERVER 居然也能调 C# 代码 ?
- 再聊一下那 SQLSERVER 行不能跨页的事
- 聊一聊 SQLSERVER 的行不能跨页
- 一次SQL调优 聊一聊 SQLSERVER 数据页
- 记一次 .NET 某安全生产信息系统 CPU爆高分析
- 记一次 .NET 某工控MES程序 崩溃分析
- 玩好.NET高级调试,你也要会写点汇编
- 记一次 .NET 某工控软件 内存泄露分析
- 记一次 .NET 某电子厂OA系统 非托管内存泄露分析
- 聊一聊如何截获 C# 程序产生的日志
- .NET 7 的 AOT 到底能不能扛反编译?
- 记一次 .NET 某自动化采集软件 崩溃分析
- 从 WinDbg 角度理解 .NET7 的AOT玩法
- 记一次.NET某工控图片上传CPU爆高分析
- WinDBG详解进程初始化dll是如何加载的