useEffect缺少一个依赖项，但是当我添加它时，我得到一个‘超过最大更新深度’的错误

useEffect是React中的一个钩子函数，用于处理副作用操作，比如数据获取、订阅事件、手动修改DOM等。它接收两个参数，第一个参数是一个回调函数，第二个参数是一个依赖数组。

当依赖数组为空时，useEffect会在每次渲染完成后都执行回调函数。当依赖数组中有值时，只有依赖项发生变化时才会执行回调函数。

在你的情况下，当你添加了一个依赖项后，出现了"超过最大更新深度"的错误。这是因为你在回调函数中修改了依赖项，导致了无限循环的更新。

为了解决这个问题，你可以检查回调函数中是否有对依赖项的修改操作。如果有，你可以将其移出回调函数，或者使用useCallback包裹回调函数来避免不必要的重新创建。

另外，你还可以通过在依赖数组中添加其他相关的依赖项来解决这个问题。这样，只有这些依赖项发生变化时，才会触发回调函数的执行。

总结一下，当你在使用useEffect时遇到"超过最大更新深度"的错误，可以考虑以下几点：

检查回调函数中是否有对依赖项的修改操作，如果有，移出或使用useCallback包裹。
检查依赖数组中是否包含了所有相关的依赖项，确保只有这些依赖项发生变化时才会触发回调函数的执行。

腾讯云相关产品和产品介绍链接地址：

云服务器（CVM）：提供可扩展的计算容量，满足不同业务需求。产品介绍链接
云数据库 MySQL版（CDB）：提供高性能、可扩展的关系型数据库服务。产品介绍链接
云存储（COS）：提供安全可靠、高扩展性的对象存储服务。产品介绍链接
人工智能机器学习平台（AI Lab）：提供一站式的人工智能开发平台，支持多种算法和模型训练。产品介绍链接
物联网开发平台（IoT Explorer）：提供设备接入、数据存储、消息通信等功能，帮助用户快速搭建物联网应用。产品介绍链接

相关·内容

Solid.js 就是我理想中的 React

从依赖数组中省略变量是 React hooks 的一个常见错误，如果你忘记了，有一些 linting 规则会警告你的。我稍后会回到这个问题上。...现在，我们把缺少的 count 变量添加到依赖数组中： function Counter() { const [count, setCount] = useState(0); useEffect...如果 linter 知道一个效果（或回调或 memo）hook 何时缺少依赖项，那么为什么框架不能自动检测依赖项并对这些更改做出响应呢？...细粒度的 DOM 更新前面我主要关注的是 Solid 的开发体验（例如更容易编写没有错误的代码），但 Solid 的性能表现也得到了很多赞誉。...话虽如此，我也开始注意到 React hooks 代码经常变得容易出错。我感觉 Solid.js 使用了 React 的许多符合人体工程学的部分，同时最大程度减少了混乱和错误。

1.9K5 0

使用 React Hooks 时要避免的6个错误

问题概览：不要改变 hooks 的调用顺序；不要使用旧的状态；不要创建旧的闭包；不要忘记清理副作用；不要在不需要重新渲染时使用useState；不要缺少useEffect依赖。 1....并将获取的数据保存在状态变量game中。当组件执行时，会获取导数据并更新状态。但是这个组件有一个警告：这里是告诉我们，钩子的执行是不正确的。因为当id为空时，组件会提示，并直接退出。...但是当我们点击“卸载”按钮时，控制台就会出现警告：修复这个问题只需要使用useEffect来清理定时器即可： useEffect(() => { if (increase) {...不要缺少useEffect依赖 useEffect是React Hooks中最常用的Hook之一。默认情况下，它总是在每次重新渲染时运行。但这样就可能会导致不必要的渲染。...这时就会有一个警告：这里是说，useEffect缺少一个count依赖，这样是不安全的。我们需要包含一个依赖项或者移除依赖数组。否则useEffect中的代码可能会使用旧的值。

2.3K0 0

Hooks + TS 搭建一个任务管理系统（终）-- 项目总结

(() => { document.title = title }, [title]) } 但是这不是最优的方案，直接这样使用会造成页面退出时获取标题丢失，我们想要的是，当我们退出登录时...，因此这样也可以解决我们的问题，我们添加多一个 useEffect 来监听页面的卸载，当卸载时我们就设置会原先的 title 最终版 useDocumentTitle 自定义 hook // 添加 title...useCallback ：就是返回一个函数，只有在依赖项发生变化的时候才会更新。一般在函数返回函数时，需要使用 useCallback 来包裹。...更多的时防止子组件重新渲染 useCallback 返回一个函数，当把它返回的这个函数作为子组件使用时，可以避免每次父组件更新时都重新渲染这个子组件,子组件一般配合 memo 使用 useMemo...：传递一个创建函数和依赖项，创建函数会需要返回一个值，只有在依赖项发生改变的时候，才会重新调用此函数，返回一个新的值。

8163 1

React 我爱你，但你太让我失望了

使用 React 写表单很多年了，但是我仍然难以通过很清晰的代码来提供强大的用户体验。当我看到 Svelte 如何处理表单的时候，我不禁觉得自己被错误的抽象束缚住了。...飘忽不定的 (use) Effect 说到 useEffect，我个人对它有一些意见。我承认这是一个优雅的创新，它在一个统一的 API 中涵盖了挂载、卸载和更新事件，但这也能算进步吗?...我必须确保在依赖数组中包含所有的响应变量。而且我认为引用计数是所有带有垃圾回收器的语言的原生特性。但是不行，我必须自己对依赖项进行细粒度的管理，因为你不知道该怎么做。...但是如果一个库需要我翻几十页才能把它用好，这不就是说明它自己设计的不好吗？不断膨胀的核心 API 因为我们已经讨论了 useEffect 这个有漏洞的抽象，所以你已经尝试了改进它。...相反，我必须给所有的效果添加一个条件，以便它们在 isVisible 为 false 时提前离开： const Inspector = ({ isVisible }) => { useEffect

1.1K2 0

Hooks + TS 搭建一个任务管理系统（五）-- 路由跳转页面

，会将路由跳转到了 projects/1 地址下，这样显然是不能找到对应的页面的，它缺少了页面的标识我们在 project/index.tsx 文件中，编写侧边栏的样式，以及设置路由的跳转，这里我们需要采用...浏览器的历史记录就像一个栈的数据结构，当我们采用 to 跳转时，实际上是向栈中 push 了一个路由地址，这里我们采用 Navigate 来进行设置默认路由，它的操作也是 push，也就是说，我们为了跳转到当前页面被...{ } 这里我们接收传来的 title 和配置选项首先我们先让 title 能够驱动页面 title 的更新我们利用 useEffect 来实现在 title 变化时，修改文档标题 useEffect...如果我们不添加这个逻辑的话，需要每个页面都指定 title 如果未指定就会显示默认的 title ，因此我们增加了这个可选配置项 // 利用 useRef 自定义 hook 它会一直帮我们保存好这个 title...useEffect 来处理在组件卸载时的 title 变化 useEffect(() => { // 利用闭包不指定依赖得到的永远是旧title ，是代码初次运行时的 oldTitle

7723 0

【React】883- React hooks 之 useEffect 学习指南

你可以通过一个一个移除的方式排查出哪个依赖导致了问题。但是，移除你使用的依赖（或者盲目地使用[]）通常是一种错误的解决方式。你应该做的是解决问题的根源。...开始更新UI，喂浏览器，我要给DOM添加一些东西。浏览器: 酷，我已经把它绘制到屏幕上了。...当我们理所当然地把它用useEffect的方式翻译，直觉上我们会设置依赖为[]。“我只想运行一次effect”，对吗？...当你想更新一个状态，并且这个状态更新依赖于另一个状态的值时，你可能需要用useReducer去替换它们。...你一旦有了包含这些的工具箱，你就不会那么频繁地直接使用useEffect。但每一个基于它的Hook都能从它的适应能力中得到益处。目前为止，useEffect主要用于数据请求。

6.5K3 0

函数式编程看React Hooks(二)事件绑定副作用深度剖析

（我希望你看本文时，已经看过了上面一篇文章，因为本文会基于你已经了解部分 hooks 本质的前提下而展开的。例如你懂得 hooks 维护的状态其实是一个由闭包提供的。）...所以 React Hooks，给 useEffect 提供了第二个参数，可以放入一个依赖数组。也就是说，当我们 isTag 更新的同时也去更新事件监听中的回调函数。...那么再来思考一个问题？每次这样一个事件绑定我们都得去寻找依赖项。。那么我们非常有可能忘记添加这个依赖，导致我们整个组件无法正常地运行。...幸好 react 给我提供了一个机制，那就是依赖项也接受函数。...注意事项一定要添加观察依赖，否则 useEffect 中的函数都会执行一次，如果简单逻辑可能是无察觉的，但是如果是大量的逻辑以及事件绑定，会非常消耗资源。一定要添加正确的依赖。

1.9K2 0

面试官：如何解决React useEffect钩子带来的无限循环问题

它这样做是为了验证依赖项是否已经更新这里的问题是，在每次呈现期间，React都会重新定义logResult的引用因此，这将在每个循环中重新触发useEffect函数因此，React会调用setCount...钩子，直到应用程序遇到更新深度错误。...]); 传递不正确的依赖项如果将错误的变量传递给useEffect函数，React将抛出一个错误。...在上面的代码中，我们告诉在useEffect方法中更新count的值此外，注意我们也将count Hook传递给了它的依赖数组这意味着每次count值更新时，React都会调用useEffect 因此...结尾尽管React Hooks是一个简单的概念，但是在将它们整合到项目中时，仍然需要记住许多规则。这将确保您的应用程序保持稳定，优化，并在生产过程中不抛出错误。

5.2K2 0

几个你必须知道的React错误实践

理想状态下，props 不应该超过两层。当我们选择多层传递时，会导致一些性能问题，这也让 React 官方比较头疼。 props 透传会导致不必要的重新渲染。...但是不正确的使用 useEffect 可能会导致最终创建多个事件绑定。下面就是一个错误的用法。...} )}这种代码没有功能性上的错误，但是在可读性方面做得很差。解决它的办法有两种。第一种是使用条件判断代替三元表达式。...而且当我们试图访问 props 上面不存在的属性时，会得到警告。10. 不对大型应用代码进行拆分大型的应用意味着包含大量的组件。...我的这 10 条建议，可以作为你用好 React 的一个起点，希望能够帮你规避很多开发过程中容易出现的错误。

7514 0

宝啊～来聊聊 9 种 React Hook

当我们使用 useState 定义 state 变量时候，它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数。...useEffect Hook 支持两个参数，第一个参数为一个函数表示副作用效应函数，默认情况下它在第一次渲染之后和每次更新之后都会执行。第二个参数是一个数组，指定了第一个参数（副效应函数）的依赖项。...第二个参数是一个数组，它表示第一个参数所依赖的依赖项，仅在该数组中某一项发生变化时第一个参数的函数才会「清除记忆」重新生成。...同样它支持两个参数: 第一参数接受传入一个函数，传入的函数调用返回值会被「记忆」。仅仅当依赖项发生变化时，传入的函数才会重新执行计算新的返回结果。...第二个参数同样也是一个数组，它表示第一个参数对应的依赖项。

1K2 0

几个你必须知道的React错误实践_2023-02-27

但是不正确的使用 useEffect 可能会导致最终创建多个事件绑定。下面就是一个错误的用法。...但是状态更新后，会触发渲染，并创建新的上下文，而不会影响之前的闭包。...} ) } 这种代码没有功能性上的错误，但是在可读性方面做得很差。解决它的办法有两种。第一种是使用条件判断代替三元表达式。...而且当我们试图访问 props 上面不存在的属性时，会得到警告。 10. 不对大型应用代码进行拆分大型的应用意味着包含大量的组件。...我的这 10 条建议，可以作为你用好 React 的一个起点，希望能够帮你规避很多开发过程中容易出现的错误。

7464 0

React技巧之理解Eslint规则

effect钩子中缺少依赖时，react-hooks/exhaustive-deps规则会警告我们。...，我们在useEffect钩子内部使用了obj变量，但是我们没有把它包含在依赖数组里。...最明显的解决方法是将obj变量添加到useEffect钩子的依赖数组中。然而，在这种情况下，它会导致一个错误，因为对象和数组在JavaScript中是通过引用进行比较的。...当useEffect钩子作为第二参数传递一个空数组时，它只在组件挂载时被调用。移动到钩子内部另一个解决办法是，将变量或者函数声明移动到useEffect钩子内部。...在所有的渲染中，变量指向相同的内存地址，因此useEffect钩子不需要将其作为依赖数组进行跟踪。使用useMemo 另一种解决办法是，使用useMemo钩子得到一个记忆值。

1.2K1 0

Vue 选手转 React 常犯的 10 个错误，你犯过几个？

但是，它并不起作用！当我们输入一个项目并提交表单时，该项目没有被添加到购物清单中。问题就在于我们违反了也许是 React 中最核心的原则 —— 不可变状态。...React依靠一个状态变量的地址来判断状态是否发生了变化。当我们把一个项目推入一个数组时，我们并没有改变该数组的地址，所以 React 无法判断该值已经改变。...=== props，react就可以确定它内部并没有发生变化新功能：react正在构建的新功能依赖将状态视为快照，如果你正在更新过去的状态版本，这会导致无法使用新功能需求变更：一些需要撤销/重做和显示历史记录的值...比如：控制台就会报警告：每当我们渲染一个元素数组时，我们需要向React提供一些额外的上下文，以便它能够识别每一个项目，通常就是需要一个唯一的标识符。...，这仍然不起作用；你将会得到一个新的错误信息： destroy is not a function 我们都知道，useEffect 钩子函数的一个特性是清理功能，即 return 函数。

2281 0

react hooks 全攻略

# 这里还有一些小技巧：如果 useEffect 的依赖项中的值没有改变，但你仍然希望执行回调函数，可以将依赖项设置为一个空数组。这样，回调函数只会在组件挂载后执行一次。...推荐使用 useMemo 钩子函数，它的作用是缓存计算结果，在依赖项发生变化时才重新计算。 useMemo 接受两个参数：一个计算函数和一个依赖数组。计算函数会在组件渲染时执行，并返回一个计算结果。...使用场景：传递回调函数给子组件：当我们将一个函数作为 prop 传递给子组件，并且该函数的依赖项在父组件重新渲染时可能发生变化时，可以使用 useCallback 缓存该函数，以确保子组件只在依赖项变化时才重渲染...useCallback返回一个稳定的回调函数依赖数据未改变时、再次运行函数，其实是执行上次函数的数据据引用。在依赖项发生变化时才会重新创建该函数。...# useEffect 可能出现死循环：当 useEffect 的依赖项数组不为空时，如果依赖项的值在每次重新渲染时都发生变化，useEffect 的回调函数会在每次重新渲染后触发。

4344 0

React Hooks踩坑分享

handleClick方法从一个“过于新”的state中得到了num。这样就引起了一个问题，如果说我们UI在概念上是当前应用状态的一个函数，那么事件处理程序和视觉输出都应该是渲染结果的一部分。...只有当依赖数组中的依赖发生变化，它才会被重新创建，得到最新的props、state。所以在用这类API时我们要特别注意，在依赖数组内一定要填入依赖的props、state等值。...唯有在依赖数组中传入了num，React才会知道你依赖了num，在num的值改变时，需要更新函数。...可以把这个函数移动到你的组件之外。这样就不用其出现在依赖列表中了。如果其不依赖state、props。但是依赖内部变量，可以将其在effect之外调用它，并让effect依赖于它的返回值。...万不得已的情况下，你可以把函数加入effect的依赖项，但把它的定义包裹进useCallBack。这就确保了它不随渲染而改变，除非它自身的依赖发生了改变。

2.9K3 0

【React】1413- 11 个需要避免的 React 错误用法

本文我将结合自己实际工作经验，总结 11 个 React 开发中常见的一些错误，帮助您避免一些错误的发生。...执行 setState 后直接使用 state 使用 useState + useEffect 时出现无限循环忘记在 useEffect 中清理副作用错误的使用布尔运算符没有定义组件参数类型把字符串当做数值传递到组件...解决方法你只需要按照提示，为每一项添加 key属性即可： const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number,...使用 useState + useEffect 时出现无限循环问题描述当我们在 useEffect()中直接调用 useState()返回的 set*()方法，并且没有设置 useEffect()第二个参数时...如果您觉得本文不错，欢迎点赞评论关注，您的支持是我分享的最大动力。

1.6K2 0

一份 2.5k star 的《React 开发思想纲领》

介绍《React 开发思想纲领》是：我开发 React 时的一些思考每当我 review 他人或自己的代码时自然而然会思考的东西仅仅作为参考和建议，并非严格的要求会随着我的经验不断更新大多数技术点是基础的重构方法论...理解不能对已经卸载的组件执行状态更新的控制台警告。给不同层级的组件都添加错误边界（Error Boundary）来防止白屏，还可以用它来向错误监控平台（比如 Sentry）上报错误，并设置报警。...扪心问问自己，你是否真的使用了某个库的 feature？你真的需要它吗? 看看这些你可能不需要的依赖你是否真的需要 Redux？有可能需要，但其实 React 本身也是一个状态管理库。...1.4 你可以做的更好 ‍♀️ 小技巧: 可以在 setState 时传入回调函数，所以没必要把 state 作为一个依赖项你不用把 setState 和 dispatch 放在 useEffect...useCallback, useMemo 和 useEffect 依赖数组中的依赖项最好都是基本类型。不要在 useCallback, useMemo 和 useEffect 中放入太多的依赖项。

8112 0

成为一名高级 React 需要具备哪些习惯，他们都习以为常

在决定是否应该编写一个测试时，问自己，“这个测试的影响是否足够大，足以证明我花在编写它上的时间是值得的?”如果答案是肯定的，那就写测试吧!...误用 useEffects 我对React Hooks唯一的不满是useEffect很容易被误用。要成为一名高级React开发人员，你需要完全理解useEffect和依赖数组的行为。...如果你没有使用React Hooks ESLint插件，你会很容易错过你的效果的一个依赖项，导致一个效果不能像它应该的那样经常运行。这个很容易修复——只需使用ESLint插件并修复警告。...一旦你在依赖项数组中列出了每个依赖项，你可能会发现你的效果运行得太频繁了。例如，该效果可能在每个渲染中运行，并导致无限更新循环。...现在我将缩小并讨论一些可以改善React代码库的最佳实践。最佳实践使用 Typescript 普通的JavaScript是一种不错的语言，但是缺少类型检查使得它不适合任何小项目。

4.7K4 0

教你如何在 React 中逃离闭包陷阱 ...

然后，我们把它保存在 something 函数之外的一个对象中。当我们下一次调用 something 函数时，我们将返回之前创建的闭包，而不是创建一个带有新闭包的新函数。...当我们试图访问存储在 Ref 中的函数内部的 state 或 props 时，我们只能得到它们的初始值： const Component = ({ someProp }) => { const [state...我们在 onClick 中的值从未更新过，你能告诉我为什么吗？当然，这又是一个过期闭包。当我们创建 onClick 时，首先使用默认状态值（undefined）形成闭包。...}); }; 不带依赖数组的 useEffect 会在每次重新渲染时触发。...因此，当我们更改 useEffect 中 ref 对象的 current 属性时，我们可以在 useCallback 中访问该属性，这个属性恰好是一个捕获了最新状态数据的闭包。

6034 0

【React】945- 你真的用对 useEffect 了吗？

最近在公司搬砖的过程中遇到了一个bug，页面加载的时候会闪现一下，找了很久才发现是useeffect的依赖项的问题，所以打算写篇文章总结一下，希望对看到文章的你也有所帮助。...使用的坑 3.1 无限循环当useEffect的第二个参数传数组传一个依赖项，当依赖项的值发生变化，都会触发useEffect执行。...但是，运行这个程序的时候，会出现无限循环的情况。useEffect在组件mount时执行，但也会在组件更新时执行。...再看这个例子：业务场景：需要在页面一开始时得到一个接口的返回值，取调用另一个接口。...请记住：只有某个变量更新后，需要重新执行useEffect的情况，才需要将该变量添加到useEffect的依赖数组中。

9.6K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云