脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React报错useState conditionally

React hook 'useState' is called conditionally报错解决

 更新时间：2022年12月02日 10:13:22   作者：Borislav Hadzhiev  
这篇文章主要为大家介绍了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 <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

原文链接：bobbyhadz.com/blog/react-…

以上就是React hook 'useState' is called conditionally报错解决的详细内容，更多关于React报错useState conditionally的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react build 后打包发布总结

    react build 后打包发布总结

    这篇文章主要介绍了react build 后打包发布总结，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React如何动态控制伪元素样式

    React如何动态控制伪元素样式

    这篇文章主要介绍了React如何动态控制伪元素样式问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • react native实现往服务器上传网络图片的实例

    react native实现往服务器上传网络图片的实例

    下面小编就为大家带来一篇react native实现往服务器上传网络图片的实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • React Fiber构建源码解析

    React Fiber构建源码解析

    这篇文章主要为大家介绍了React Fiber构建源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • React Draggable插件如何实现拖拽功能

    React Draggable插件如何实现拖拽功能

    这篇文章主要介绍了React Draggable插件如何实现拖拽功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • 比ant更丰富Modal组件功能实现示例详解

    比ant更丰富Modal组件功能实现示例详解

    这篇文章主要为大家介绍了比ant更丰富Modal组件功能实现示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11
  • webpack入门+react环境配置

    webpack入门+react环境配置

    webpack是一个前端资源模块化管理和打包工具，说白了就是方便我们管理自己的常用的一些代码，比如你开发中用到sass以及jade同时用到es6，开发时你不可能改动某个地方就挨个命令去转换再到浏览器去看效果，那样效率是非常低的。所以webpack帮我们省去了那些多余的步骤。
    2017-02-02
  • react组件实例属性props实例详解

    react组件实例属性props实例详解

    这篇文章主要介绍了react组件实例属性props,本文结合实例代码给大家简单介绍了props使用方法，代码简单易懂，需要的朋友可以参考下
    2023-01-01
  • 使用react完成点击返回顶部操作

    使用react完成点击返回顶部操作

    本文主要介绍了使用react完成点击返回顶部操作，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 详解React 代码共享最佳实践方式

    详解React 代码共享最佳实践方式

    这篇文章主要介绍了React 代码共享最佳实践方式,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2021-05-05

最新评论