【React报错之React hook 'useState' is called conditionally】正文从这开始~
总览
当我们有条件地使用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 Count is greater than 0;
}// ?? 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 (Count: {count}
);
}上述代码片段的问题在于，我们使用的第二个
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 Count is greater than 0;
}return (Count: {count}
);
}我们把第二个
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 (Count: {count}
);
}上面的代码片段导致了错误，因为我们有条件地调用第二个
useState钩子。这是不允许的，因为钩子的数量和钩子调用的顺序，在我们的函数组件的重新渲染中必须是相同的。
为了解决这个错误，我们必须把useState的调用移到顶层，而不是有条件地调用这个钩子。
就像文档中所说的：- 只在最顶层使用 Hook
- 不要在循环，条件或嵌套函数中调用 Hook
- 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook
- 在 React 的函数组件中调用 Hook
- 在自定义 Hook 中调用其他 Hook
推荐阅读
- react.js|react学习----jsx语法
- react.js|react学习----组件
- React报错之Expected an assignment or function
- React报错之Unexpected default export of anonymous function
- 前端|前端食堂技术周刊第 44 期（Bun、Vue.js 挑战、React 状态管理的新浪潮、Can I DevTools、函数式编程）
- React报错之Expected `onClick` listener to be a function
- React报错之Type '() => JSX.Element[]' is not assignable
- React报错之JSX element type does not have any construct
- react.js|React Router V6实现嵌套路由重定向