时间戳

首页 > 解决方案 > ReactJS：错误：超过最大更新深度

javascript - ReactJS：错误：超过最大更新深度

问题描述

UPDATE3：我有一个由每个项目的 .map 函数创建的导航栏。当我单击导航栏项目时，我想滚动到我的 SPA 的特定 div，为此，我创建了一个函数来滚动到页面的每个 div 中的每个 ref。我的问题是我需要将这些参考存储在我的导航栏中，当我动态创建这些参考时，我得到了这个错误：

Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
setMyInputRef2
C:/Users/OMEN/Desktop/Web/tstbst/src/Pages/App.js:62

  60 | 
  61 | setMyInputRef (element) {
> 62 |     this.setState( { main : element });
     | ^  63 | };


 87 |     <div ref={(prop) => {this.setMyInputRef(prop)} }>

其中 main 是关于 div Main 的参考

UPDATE4：当我这样做时它会起作用：


setMyInputRef = (element) => {
        this.setState( { main : element });
    };

<div ref={this.setMyInputRef} >

但是我想将 args 传递给我的函数 stMyInputRef 以识别每个 NavbarItem 以存储 ref，这样我就不能将该 arg 传递给我的函数

这就是我想要的：


setMyInputRef = (element,stateRef) => {
        this.setState( {"stateRef" : element });
        // stateRef as "div1" 
    };

<div ref={(thisDivRef)=>this.setMyInputRef(thisDivRef,"div1")} >

为什么我不能这样做？

标签： javascriptreactjs

解决方案

您的函数在ref计算时调用，而不是在用户单击时调用。这就是为什么你有一个无限循环。当页面加载时， ref 调用改变状态的函数，然后重新加载页面等......

如果您告诉我们您要对此做什么，我们也许可以帮助您找到解决方案:)

推荐阅读