ReactJS：错误：超出最大更新深度答案

【问题标题】：ReactJS : Error: Maximum update depth exceededReactJS：错误：超出最大更新深度
【发布时间】：2020-07-14 08:57:08
【问题描述】：

更新3：我有一个由每个项目的 .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 的引用

更新4：当我这样做时，IT 工作：


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")} >

为什么我不能这样做？

【问题讨论】：

为什么你的 onClick 变成了 ref？你能分享你的整个组件吗
什么是prop，因为如果这是道具，这可能是试图传递整个道具对象并且它太大了？但我只是在这里吐口水，因为不清楚你到底想做什么
Refs 并不意味着存储在状态中。它们通常用于访问底层 DOM 元素，以便您可以在反应生命周期之外操纵它们。如果你能解释更多关于你试图用 Div 做什么可能会给你一个更好的答案。另外，您使用的是钩子还是类？

标签： javascript reactjs

【解决方案1】：

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

如果你告诉我们你想用这个做什么，我们也许可以帮助你找到一个解决方案:)

【讨论】：