在渲染函数中设置条件并更改状态答案

【问题标题】：set a condition inside render function and change state在渲染函数中设置条件并更改状态
【发布时间】：2020-02-12 00:19:45
【问题描述】：

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

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 内重复调用 setState 或组件更新。 React 将嵌套更新的数量限制为防止无限循环。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

使用这个：

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

让我知道这是否有效？

【讨论】：

你很高兴

【解决方案2】：

在您的渲染中，您有 this.toggleActive() 更改状态，导致重新渲染，然后再次更改状态，因此这会导致无限循环。

只需删除此行并尝试。

如果你想改变状态，你可以使用 componentDidMount 生命周期：

componentDidMount() {
   this.toggleActive();
}

【讨论】：

如果你想在没有点击功能的情况下更新你的状态，然后在 componentDidMount 中更新你的状态，因为这个函数将在你的组件安装时自动调用。并且更改此函数中的状态将导致重新渲染，因此您将能够看到更新。
@chauhanamit 你能给我看一些代码吗？
@HamedDehghan 我通过编辑答案添加了此信息，请检查。

【解决方案3】：

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

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

【讨论】：

我想在元素渲染时调用该函数。不点击
@HamedDehghan 这将导致无限循环。因为每次状态改变时都会调用 render 。因此，如果您每次调用 render 时都更改状态，您将有一个无限循环。
我必须改变状态或解决这个问题的东西。谢谢你的帮助。
我可以在渲染之外设置条件吗？