时间戳

首页 > 解决方案 > setState 在从嵌套子功能组件更新状态时出错

javascript - setState 在从嵌套子功能组件更新状态时出错

问题描述

链接到沙盒

我试图不止一次更新状态。我怎样才能做到这一点。我在其他网站上看到过以下方法，但无法使用。

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

标签： javascriptreactjs

解决方案

这是由无限循环引起的。您的App组件是父组件，并将更新父组件Income的方法传递给它deldata。子功能组件具有在每次渲染时执行的这段代码：

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

当Remov为真时，它会更新父级的状态。这会导致孩子的重新渲染。这会更新父级的状态。ETC...

不要todel在你的功能组件中触发，即使是有条件的也不行。仅在响应某些事件（onClick 等）时调用它。

推荐阅读