Question

我收到这个错误，我猜是因为反应的状态突然出现，但我不知道这里发生了什么问题。

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

父组件

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)}/>
        );
    }
}

我在它们之间传递数据并且在父组件中取消注释 this.setState({parentTime: childTime}) 会导致该错误。这是我需要帮助来理解和修复它的地方。

Answer 1

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 />;
  }
}

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

1 个答案: