Question

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

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或 componentDidUpdate。 React将嵌套更新的数量限制为防止无限循环。

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

让我知道是否可行？

Answer 2

在渲染中，您具有this.toggleActive（），它会更改状态，从而导致重新渲染，然后再次更改状态，因此会导致无限循环。

只需删除此行并尝试。

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

componentDidMount() {
   this.toggleActive();
}

Answer 3

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

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

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

3 个答案: