Javascript 错误：超过最大更新深度。反应状态

我得到这个错误，我猜是由于爆破反应的状态，但我不知道是怎么回事

因此，我有父子关系组件，如下所示：

父组件

class App extends Component {
    constructor(props){
        super(props);
        this.state={
            parentTime: 0,
        }
    };
    
    
    changeTimeState(childTime){
        //this.setState({parentTime: childTime})
        console.log("Parent state time: ",childTime)
    }
    render() {
        return (
            <div className="box">
                <Child time={this.state.parentTime} changeTime={this.changeTimeState.bind(this)}/>
            </div>
        );
    }
}

class Child extends Component {
    constructor(props){
        super(props)
        this.state = {
            childTime: props.time
        }
    }

    componentDidMount(){
            if (this.state){
                setInterval(()=>{
                    this.setState({childTime: this.state.childTime+1})
                },1000)
            }
        }
    
    render() {
        return (
            <div newTime={this.props.changeTime(this.state.childTime)}/>
        );
    }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
这个州={
父时间：0，
}
};
changeTimeState（儿童时间）{
//this.setState（{parentTime:childTime}）
log（“父状态时间：”，子时间）
}
render（）{
返回(
);
}
}

子组件

class App extends Component {
    constructor(props){
        super(props);
        this.state={
            parentTime: 0,
        }
    };
    
    
    changeTimeState(childTime){
        //this.setState({parentTime: childTime})
        console.log("Parent state time: ",childTime)
    }
    render() {
        return (
            <div className="box">
                <Child time={this.state.parentTime} changeTime={this.changeTimeState.bind(this)}/>
            </div>
        );
    }
}

class Child extends Component {
    constructor(props){
        super(props)
        this.state = {
            childTime: props.time
        }
    }

    componentDidMount(){
            if (this.state){
                setInterval(()=>{
                    this.setState({childTime: this.state.childTime+1})
                },1000)
            }
        }
    
    render() {
        return (
            <div newTime={this.props.changeTime(this.state.childTime)}/>
        );
    }
}

类子级扩展组件{
建造师（道具）{
超级（道具）
此.state={
儿童时代：道具时代
}
}
componentDidMount（）{
如果（本州）{
设置间隔（（）=>{
this.setState（{childTime:this.state.childTime+1}）
},1000)
}
}
render（）{
返回(
);
}
}

我在它们之间传递数据，并且在父组件中取消注释

this.setState（{parentTime:childTime}）

会导致该错误。这就是我需要帮助来理解和修复它的地方。

我不知道这是你想要的吗
i don't know is it what you wanted 

class Child extends Component {
  constructor(props) {
    super(props);
    this.state = {
      childTime: props.time,
    };
  }

  componentDidMount() {
    if (this.state) {
      setInterval(() => {
        this.setState({ childTime: this.state.childTime + 1 });
        this.props.changeTime(this.state.childTime);
      }, 1000);
    }
  }

  render() {
    return <div />;
  }
}

类子扩展组件{
建造师（道具）{
超级（道具）；
此.state={
儿童时代：道具时代，
};
}
componentDidMount（）{
如果（本州）{
设置间隔（（）=>{
this.setState（{childTime:this.state.childTime+1}）；
this.props.changeTime（this.state.childTime）；
}, 1000);
}
}
render（）{
返回；
}
}

这是因为在将函数作为某种道具传递给div时，调用了一个直接更改状态的函数：。。。改变状态的函数不应该这样调用。只能在用户交互时或在特定时间间隔调用它。你想用它做什么？为了更好地解释发生了什么…当你调用函数时，父组件的状态会改变，所以它会重新渲染…同时它也会重新渲染子组件，这将再次调用函数来更改父组件的状态…这将重新呈现---因此我们有一个无限循环，您想让您的组件在这里做什么？Hello@OliverRadini我希望我的计时器在后台运行，我使用子组件来完成此操作，因为如果我设置

componentDidMount（）

在父组件中，然后它也会重新加载所有其他组件，这就是为什么我尝试使用单独的组件来克服这个问题。（我不知道是否还有其他方法）嗨@TalmacelMarianSilviu谢谢你抽出时间。我的计时器在后台运行，因此没有用户交互。我怎样才能在一定的时间间隔内完成呢？你好@BogdanPryvalov，是的，这正是我想要的。但当我使用函数

changeTime（）将其设置为父状态时，它给了我
undefined

。当状态更新时，是否有任何方法不必重新渲染所有其他组件，但我的计时器应该始终在后台运行？我只是不明白为什么您需要在child comp中使用状态，它应该算什么，以及childTime和parentTime之间的差异是什么？是的，您是对的。实际上，当我从完整的长代码中取出特定的代码片段时，我忘记了更改它