Question

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

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来存储引用，这样我就无法将该args传递给函数

那就是我想要的：


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

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

为什么我不能这样做？

Answer 1

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

如果您告诉我们您打算如何做，我们也许可以帮助您找到解决方案：）

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

1 个答案: