如果类组件中的条件发生反应，如何在内部调用函数？

Question

我是一个反应初学者，我试图在 if 条件下调用一个函数。我想如果条件为真，则将状态对象的值设置为 1，或者简单地调用一个将值设置为 1 的函数。 以下是我的代码：

class CountWalls extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            leftcount : 0,
            rightcount : 0
        }
    }
    setright = () =>{ 
         this.setState({rightcount: 1});    
    }
    setleft = () =>{ 
         this.setState({leftcount: 1});
    }
}
    render(){
    const arr = [4, 1, 1, 3, 2];
    let max = 0;
    max = Math.max(...arr);
    if(arr[0] <= max){ this.setleft() }
    if(arr[arr.length - 1] <= max){ this.setright() }  
        return(
            <>
             <h2>Right count: {this.state.rightcount}</h2>
             <h2>Left count: {this.state.leftcount}</h2>
            </>
        );
    }
}

我没有参加任何试验，只是卡在这里错误：请回答 enter image description here 错误：超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

如果我从这样的函数调用中删除 () 括号{this.setleft}，我会收到以下错误：

src\component\CountWalls.js 第 21:29 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions 第 22:42 行：期望一个赋值或函数调用，而是看到一个表达式 no-unused-expressions

Answer 1

您不应该在没有 HTML 事件的情况下更新 render 方法中的状态。 否则会无限循环

你可以使用下面的代码来做到这一点

    class CountWalls extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                leftcount : 0,
                rightcount : 0
            }
        }

       componentDidMount(){
            const arr = [4, 1, 1, 2, 3];
            let max = 0;
            max = Math.max(...arr);
            if(arr[0] <= max){  this.setleft() }
            if(arr[arr.Length - 1] <= max){  this.setright() }
            console.log(this.state.rightcount);
        }
        setright = () =>{ 
             this.setState({rightcount: 1});    
        }
        setleft = () =>{ 
             this.setState({leftcount: 1});
        }
        render(){
           
            return(
                <>
                 <h2>Right count: {this.state.rightcount}</h2>
                 <h2>Left count: {this.state.leftcount}</h2>
                </>
            );
        }
    }