一个if ... else带有两个导致无限循环的setStates

Question

此代码导致无限循环。

我试图呈现一个按钮和文本，显示按钮被点击了多少次，直到它被点击10次，之后按钮应该消失，文本重新回到之前的任何事情+“现在它消失了“。

class button extends React.Component 
{ 
constructor (props) 
{ 
    super(props) 

    this.state = 
    { 
     num: 0, 
     para: null 
    } 
} 

render() { 

    var myString = <p> you clicked the button {this.state.num} times {this.state.para} </p>; 

    let either; 
    if (this.state.num < 10) { 
     either = (
     <Button onClick={() => { this.handleButtonClick() }} bsStyle="danger"> button </Button>) 
    } else { 
     either = null; 
     this.setState({ para: "and now it's gone" }); 
    } 

    return(
     <Grid> 
      <Row> 
       <Col xs={7} sm={7} md={7} lg={7}> {myString} </Col> 
       <Col xs={5} sm={5} md={5} lg={5}> 
          { either } 
       </Col> 
      </Row> 
     </Grid> 
    ) 
} 
handleButtonClick() { 
    this.setState({ 
     num: this.state.num + 1 
    }) 
} 
} 

任何帮助，将不胜感激！

Answer 1

setState调用重新渲染，并且您在渲染方法中调用setState。