如何解决setState在从嵌套子功能组件更新状态时给出错误?

LInk to sandBOx

我试图多次更新状态。我怎样才能做到这一点。
我从其他网站上看到了以下方法,但无法使用。

componentDidUpdate(prevProps,prevstate)

错误错误:超出最大更新深度。当组件重复调用componentwillUpdate或componentDidUpdate内部的setState时,可能会发生这种情况。 React限制了嵌套更新的数量,以防止无限循环。

state={
        incobj:[],expenobj:[],totalinc:0,totalexp:0,click:0
    }


    takeInp=(e)=>{
        if(e[0]==="Income"){
            this.setState({
                incobj:this.state.incobj.concat( [e]),totalinc:this.state.totalinc+parseInt(e[2])
            }) 
        }
        if(e[0]==="Expense"){
            this.setState({
                expenobj:this.state.expenobj.concat( [e]),totalexp:this.state.totalexp+parseInt(e[2])
            })
        }
    }

    deldata=(d)=>{
        let num=parseInt( d.substr(1,d.length));
        if(d.charat(0)==="i"){
            this.setState({
                click:this.state.click+1
             })
             console.log(this.state.click,'increased')
        }
        if(d.charat(0)==="e"){
            this.setState({
                click:this.state.click+1
             })
             console.log(this.state.click,'increased')
        }
       
    }
    


  


  

解决方法

这是由无限循环引起的。您的App组件是Income的父级,并通过deldata方法向其传递更新父级的方法。子功能组件具有此片段,可在每个渲染器上执行:

if (Remov) {
    props.todel(Remov);
}

Remov为真时,它将更新父级的状态。这导致孩子的降职。哪个更新了父状态。等等...

请勿在您的功能组件中触发todel,甚至不要有条件地触发。仅在响应某些事件(onClick等)时调用此函数。