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

解决React报错Rendered more hooks than during the previous render

 更新时间：2022年12月02日 09:07:10   作者：Borislav Hadzhiev  
这篇文章主要为大家介绍了React报错Rendered more hooks than during the previous render解决方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪

总览

当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时，会产生"Rendered more hooks than during the previous render"错误。为了解决该错误，将所有的钩子移到函数组件的顶层，以及不要在条件中使用钩子。

这里有个示例用来展示错误是如何发生的。

// App.js
import {useEffect, useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  // ⛔️ Error: Rendered more hooks than during the previous render.
  if (counter > 0) {
    // 👇️ calling React hook conditionally
    useEffect(() => {
      console.log('hello world');
    });
  }
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

代码的问题在于，我们有条件地调用了useEffect钩子。

顶层调用

为了解决该错误，我们必须将条件移到钩子内部。因为React钩子只能在顶层调用。

import {useEffect, useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  // ✅ hook is called at top level (not conditionally)
  useEffect(() => {
    if (counter > 0) {
      console.log('hello world');
    }
  });
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

我们将if语句移动到了useEffect钩子内部。

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

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

这里有另外一个示例用来展示错误是如何发生的。

import {useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  // 👇️ this returns before second hook runs if condition is met
  if (counter > 0) {
    return <h2>Returning early</h2>;
  }
  // ⛔️ Error because hook is called conditionally
  const [color, setColor] = useState('salmon');
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

问题在于，第二个useState钩子只有在上面的条件没有满足时才会被调用。

条件之上

为了解决这个错误，把所有的钩子移到组件的顶层，在任何可能返回值的条件之上。

import {useState} from 'react';
export default function App() {
  const [counter, setCounter] = useState(0);
  const [color, setColor] = useState('salmon');
  // 👇️ condition that may return early must be below all hooks
  if (counter > 0) {
    return <h2>Returning early</h2>;
  }
  return (
    <div>
      <button onClick={() => setCounter(counter + 1)}>toggle loading</button>
      <h1>Hello world</h1>
    </div>
  );
}

我们把第二个useState钩子移动到有可能返回一个值的if条件上面。

这是很有帮助的，因为钩子现在在顶层，并且有可预测的行为，允许React在调用useState和useEffect之间正确地保存状态。

就像文档中所说的那样：

  • 只从React函数组件或自定义钩子中调用Hook
  • 只在最顶层使用 Hook
  • 不要在循环，条件或嵌套函数中调用 Hook
  • 确保总是在你的 React 函数的最顶层以及任何 return 之前使用 Hook

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

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

以上就是解决React报错Rendered more hooks than during the previous render的详细内容，更多关于React报错Rendered more hooks的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • react dva实现的代码

    react dva实现的代码

    dva是一个基于redux和redux-saga的数据流方案，然后为了简化开发体验，dva额外内置了react-router,fetch，可以激烈为一个轻量级的应用框架，这篇文章主要介绍了react dva实现,需要的朋友可以参考下
    2021-11-11
  • React利用路由实现登录界面的跳转

    React利用路由实现登录界面的跳转

    这篇文章主要介绍了React利用路由实现登录界面的跳转，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • 浅谈React Refs 使用场景及核心要点

    浅谈React Refs 使用场景及核心要点

    本文主要介绍了React Refs 使用场景及核心要点，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • React循环遍历渲染数组和对象元素方式

    React循环遍历渲染数组和对象元素方式

    这篇文章主要介绍了React循环遍历渲染数组和对象元素方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • react中实现搜索结果中关键词高亮显示

    react中实现搜索结果中关键词高亮显示

    这篇文章主要介绍了react中实现搜索结果中关键词高亮显示,使用react实现要比js简单很多，方法都是大同小异，具体实现代码大家跟随脚本之家小编一起看看吧
    2018-07-07
  • 阿里低代码框架lowcode-engine自定义设置器详解

    阿里低代码框架lowcode-engine自定义设置器详解

    这篇文章主要为大家介绍了阿里低代码框架lowcode-engine自定义设置器示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-02-02
  • React Hook Form 优雅处理表单使用指南

    React Hook Form 优雅处理表单使用指南

    这篇文章主要为大家介绍了React Hook Form 优雅处理表单使用指南，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-03-03
  • ReactJS中不同类型的状态详解

    ReactJS中不同类型的状态详解

    这篇文章主要为大家介绍了ReactJS中不同类型的状态详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-12-12
  • React.js组件实现拖拽排序组件功能过程解析

    React.js组件实现拖拽排序组件功能过程解析

    这篇文章主要介绍了React.js组件实现拖拽排序组件功能过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-04-04
  • React中props使用教程

    React中props使用教程

    props是组件（包括函数组件和class组件）间的内置属性，用其可以传递数据给子节点，props用来传递参数。组件实例化过程中，你可以向其中传递一个参数，这个参数会在实例化过程中被引用
    2022-09-09

最新评论