美文网首页
forEach 使用 try{}catch{} 如何中断循环

forEach 使用 try{}catch{} 如何中断循环

作者: 小李不小 | 来源:发表于2020-08-08 12:39 被阅读0次

    foreach 使用 break 是无法中断循环的,看下面代码,是怎么来解决这种问题的

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    <body>
     
    <div id="example"></div>
    <script type="text/babel">
    
    
    class Hello extends React.Component{
    
    //第一个是组件初始化(initialization)阶段
    constructor(props){
        //初始化状态
        super(props)
    
        //初始化状态
        this.state={
            list:['1','2'],
        }
    }
    
    }
    
    //button 点击事件
    hdClick=()=>{
        const {val,list}=this.state; //获取到val 和 list 
        //es5 写法  val=this.state.val;  list=this.state.list
            list.push(val); //把输入的内容 push到list里面
    
        try{
    
            list.forEach((item)=>{
                 if(item=='1'){
                     console.log('item==1成功')
                    // 条件成功,抛出错误
                    throw new Error('条件成功,抛出错误')
                 }
             })
    
        }catch(e){
            console.log('foreach-err',e.message)
        }
    
        
    
        this.setState({ //赋值
            list:list
        })
    
        console.log('listpush----',list)
    }
    
        render(){
    return <div>
    <button onClick={this.hdClick}>点击新增数据</button>
    </div>
    
            
        }
    
        
    
    
    
    
    
    
    }
    
    
    ReactDOM.render(
        <Hello></Hello>,
        document.getElementById('example')
        )
    
    
    </script>
     
    </body>
    </html>
    
    看下面的结果,完美解决了foreach 中断的问题
    image.png

    相关文章

      网友评论

          本文标题:forEach 使用 try{}catch{} 如何中断循环

          本文链接:https://www.haomeiwen.com/subject/szqhdktx.html