解决 React Hook 'useState' is called conditionally 错误

Z时代
2024-01-10
分类：综合

当我们有条件地使用 useState 钩子或在可能返回值的条件之后，会出现错误“React hook 'useState' is called conditionally”。要解决该错误，需要将所有 React 钩子移到任何可能返回值的条件之上。

React-Hook-useState-is-called-conditionally

下面是错误发生方式的示例。


importReact, {useState} from'react';
exportdefaultfunctionApp() {
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>
<buttononClick={() => setCount(count + 1)}>Increment</button>
</div>
  );
}

代码片段中的问题是 - 我们在可能返回值的条件之后使用第二个 useState 钩子。

为了解决这个错误，我们只能在顶层调用 React 钩子。


importReact, {useState} from'react';
exportdefaultfunctionApp() {
const [count, setCount] = useState(0);
// 将钩子移到可能返回的条件之上
const [message, setMessage] = useState('');
// 任何可能返回的条件都必须低于所有钩子
if (count > 0) {
return<h1>Count is greater than 0</h1>;
  }
return (
<div>
<h2>Count: {count}</h2>
<buttononClick={() => setCount(count + 1)}>Increment</button>
</div>
  );
}

我们将第二个 useState 钩子移到可能返回值的条件之上。

这解决了错误，因为我们必须确保每次渲染组件时都以相同的顺序调用 React 钩子。

这意味着我们不允许在循环、条件或嵌套函数中使用钩子。

我们永远不应该有条件地调用钩子。


importReact, {useState} from'react';
exportdefaultfunctionApp() {
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>
<buttononClick={() => setCount(count + 1)}>Increment</button>
</div>
  );
}