迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

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

作者:迹忆客 最近更新:2021/04/12 浏览次数:

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

React-Hook-useState-is-called-conditionally

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

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);

  // 将钩子移到可能返回的条件之上
  const [message, setMessage] = useState('');

  // 任何可能返回的条件都必须低于所有钩子
  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 调用移到顶层而不是有条件地调用钩子。

如文档所述:

  • 只在顶层调用钩子
  • 不要在循环、条件或嵌套函数中调用钩子
  • 在任何提前返回之前,始终在 React 函数的顶层使用钩子
  • 仅从 React 函数组件或自定义钩子调用钩子。

这有助于 React 保留多个 useState 调用之间的钩子状态。

本站文章均为原创或翻译,转载请发邮件至 1244347461@qq.com 进行申请,未经许可,禁止转载。经作者同意之后,转载请以链接形式注明出处

本文地址:

扫一扫阅读全部技术教程

社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

扫码一下
查看教程更方便