脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → 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 Native 使用Fetch发送网络请求的示例代码

    React Native 使用Fetch发送网络请求的示例代码

    本篇文章主要介绍了React Native 使用Fetch发送网络请求的示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-12-12
  • React+Webpack快速上手指南(小结)

    React+Webpack快速上手指南(小结)

    这篇文章主要介绍了React+Webpack快速上手指南(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-08-08
  • React Native自定义组件与输出方法详解

    React Native自定义组件与输出方法详解

    这篇文章主要给大家介绍了关于React Native自定义组件与输出方法的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2018-07-07
  • react Table准备Spin Empty ConfigProvider组件实现

    react Table准备Spin Empty ConfigProvider组件实现

    这篇文章主要为大家介绍了react Table准备Spin、Empty、ConfigProvider组件实现详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪<BR>
    2023-02-02
  • 手动用webpack搭建第一个ReactApp的示例

    手动用webpack搭建第一个ReactApp的示例

    本篇文章主要介绍了手动用webpack搭第一个 ReactApp的示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04
  • React Context原理深入理解源码示例分析

    React Context原理深入理解源码示例分析

    这篇文章主要为大家介绍了React Context原理深入理解源码示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-01-01
  • 在React项目中实现一个简单的锚点目录定位

    在React项目中实现一个简单的锚点目录定位

    锚点目录定位功能在长页面和文档类网站中非常常见,它可以让用户快速定位到页面中的某个章节,本文讲给大家介绍一下React项目中如何实现一个简单的锚点目录定位,文中有详细的实现代码,需要的朋友可以参考下
    2023-09-09
  • 解决react中useState状态异步更新的问题

    解决react中useState状态异步更新的问题

    本文主要介绍了react中useState状态异步更新的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • 详解React Native与IOS端之间的交互

    详解React Native与IOS端之间的交互

    React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台。本文将介绍React Native与IOS端之间的交互。
    2021-06-06
  • React竞态条件Race Condition实例详解

    React竞态条件Race Condition实例详解

    这篇文章主要为大家介绍了React竞态条件Race Condition实例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-11-11

最新评论