Javascript 在渲染函数内设置条件并更改状态

我想在渲染函数中设置一个条件。 代码如下：

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

它成功编译，但在运行时返回此错误：

超过最大更新深度。当一个组件 在componentWillUpdate或 组件更新。React将嵌套更新的数量限制为 防止无限循环

---

将代码更改为以下内容，基本上是在渲染时调用函数

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

---

将代码更改为以下内容，基本上是在渲染时调用函数

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

---

在渲染中，您有一个.toggleActive，它会更改状态，导致重新渲染，然后再次更改状态，因此会导致初始化循环

只要拆下这条线，再试一次

如果要更改状态，可以使用componentDidMount生命周期：

componentDidMount() {
   this.toggleActive();
}

---

在渲染中，您有一个.toggleActive，它会更改状态，导致重新渲染，然后再次更改状态，因此会导致初始化循环

只要拆下这条线，再试一次

如果要更改状态，可以使用componentDidMount生命周期：

componentDidMount() {
   this.toggleActive();
}

使用以下命令：

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

让我知道这是否有效？

使用以下方法：

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

---

让我知道这是否有效？

我想在元素渲染时调用该函数。不clicking@HamedDehghan这将导致无限循环。因为每次状态更改时都会调用render。因此，如果每次调用render时都更改状态，则将有一个Infinite循环。我必须更改状态或解决此问题的方法。谢谢您的帮助。我可以在渲染之外设置条件吗？我想在元素渲染时调用该函数。不clicking@HamedDehghan这将导致无限循环。因为每次状态更改时都会调用render。因此，如果每次调用render时都更改状态，则将有一个Infinite循环。我必须更改状态或解决此问题的方法。谢谢您的帮助。我可以在渲染之外设置条件吗？如果您想在不使用click函数的情况下更新状态，请在componentDidMount内更新您的状态，因为此函数将在安装组件时自动调用。更改此函数中的状态将导致重新渲染，以便您能够看到更新。@chauhanamit您可以给我看一些代码吗？@Hamedehghan我通过编辑答案添加了此信息，请选中。如果您想在不单击函数的情况下更新您的状态，请在componentDidMount中更新您的状态，由于此功能将在安装组件时自动调用。更改此函数中的状态将导致重新渲染，以便您能够看到更新。@chauhanamit您能给我看一些代码吗？例如，请？@HamedDehghan我通过编辑答案添加了此信息，请检查。您很好您很好