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

我是一个react初学者，我正在尝试在if条件下调用函数。如果条件为true，则将状态对象的值设置为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>
            </>
        );
    }
}

类CountWalls.Component{
建造师（道具）{
超级（道具）；
此.state={
左计数：0，
rightcount:0
}
}
setright=（）=>{
this.setState（{rightcount:1}）；
}
setleft=（）=>{
this.setState（{leftcount:1}）；
}
}
render（）{
常数arr=[4,1,1,3,2]；
设max=0；
最大值=数学最大值（…arr）；
如果（arr[0]，则不应在没有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>
                </>
            );
        }
    }

类CountWalls.Component{
建造师（道具）{
超级（道具）；
此.state={
左计数：0，
rightcount:0
}
}
componentDidMount（）{
常数arr=[4,1,1,2,3]；
设max=0；
最大值=数学最大值（…arr）；
if（arr[0]{
this.setState（{leftcount:1}）；
}
render（）{
返回(
右计数：{this.state.rightcount}
左计数：{this.state.leftcount}
);
}
}
错误准确地描述了发生的情况，您在
render
中调用调用
setState
的函数，如
setright
。只需在
componentDidMount
中计算leftcount和rightcount的值，然后调用setState一次。无论何时调用setState，组件都会重新绘制。因此，因为在render（）中有setRight和setleft，您正在生成一个无限循环。您可以使用构造函数或componentDidMount初始化您的数据。@BhartiPatle欢迎。如果它有效，请将我的答案标记为正确。在上述代码的继续部分中，我有两个使用数组值的for循环，我不能在componentDidMount中放入for循环。我该如何做？我有modified原始代码并用for循环逻辑（完整代码）对其进行更新，但for循环未运行。仅当setstate设置时，左右计数为1