在渲染 function 中设置条件并更改 state

Question

I want to set a condition inside the render function. The code is as below:

class ListItems extends React.Component{
    constructor(){
        super();
        this.state = {
            active:false,   
        }
        this.toggleActive = this.toggleActive.bind(this);
    }
    toggleActive(){
        this.setState({
            active: !this.state.active
        })
    }   
    render(){   
        var demo = document.querySelector("#" + this.props.data);
        if(document.body.contains(demo)){
            this.toggleActive()
            return(
                <li className={this.state.active ? "active" : ""} onClick={this.toggleActive}>{this.props.data}</li>
            )
        }   
        else{
            return(
                <li className={this.state.active ? "active" : ""} onClick={this.toggleActive}>{this.props.data}</li>
            )
        }   
    }
}

it compiles successfully but returns this error while running:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

use this:

class ListItems extends React.Component{
    constructor(){
        super();
        this.state = {
            active:false,   
        }
        this.toggleActive = this.toggleActive.bind(this);
    }
    toggleActive(){
        this.setState({
            active: !this.state.active
        })
    }   
    componentDidMount(){
        var demo = document.querySelector("#" + this.props.data);
        if(document.body.contains(demo)){
            this.toggleActive()
            return(
                <li className={this.state.active ? "active" : ""} onClick={this.toggleActive}>{this.props.data}</li>
            )
        }   
    }
    render(){   
        return(
            <li className={this.state.active ? "active" : ""} onClick={this.toggleActive}>{this.props.data}</li>
        )
    }
}

let me know if that works?

Answer 2

In your render you have this.toggleActive() which changes the state, causing a rerender, and which then again changes state, so this causes an intinite loop.

Just remove this line and try.

If you want to change state you can use componentDidMount lifecycle:

componentDidMount() {
   this.toggleActive();
}

Answer 3

Change the code to following, you are basically calling the functions while rendering.

onClick={ e => {// your code} }