有条件地中断或退出reactjs中的循环

Question

In my source code I want to break nested loops based on some condition is met. I have used return and break but does not work. Even for break I get build error. Can someone help me. My code is given below:

updateUserData(event,id){
    alert(id);
    var elementName=event.target.name;
    alert('element name = '+elementName);
    var userData=this.state.user_data;
    var found=false;
    userData.sports.map(function(sport){
      sport.ticket_detail.map(function(ticket){
        alert(ticket.id);
        if(ticket.id==id){
          alert('matched');
          ticket.ticket.map(function(element){
            alert(element.paramname)
            var str1 = element.paramname;
            var str2 = event.target.name;
            if(element.paramname==event.target.name){
                alert('sport = '+sport.name+' category = '+ticket.cat+' id = '+ticket.id+' paramname = '+element.paramname);
                element.value='hitesh';
                found=true;
                return;
            }
          })
        }
          if(found){
            alert('found1');
            return;
          }
      })
      if(found){
        alert('found2');
        return;
      }
    })
    console.log('updated='+JSON.stringify(userData));
    this.setState({user_data:userData});
  }

Answer 1

It seems you do not intend to map any values. So just go for a simple for-loop instead like this:

updateUserData(event,id){
    alert(id);
    var elementName=event.target.name;
    alert('element name = '+elementName);
    var userData=this.state.user_data;

    for(let sport in userData.sports){
        for(let ticket in sport.ticket_detail){
            alert(ticket.id);
            if(ticket.id==id){
                alert('matched');
                for(let element in ticket.ticket){
                    alert(element.paramname);
                    var str1 = element.paramname;
                    var str2 = event.target.name;
                    if(element.paramname==event.target.name){
                        alert('sport = '+sport.name+' category = '+ticket.cat+' id = '+ticket.id+' paramname = '+element.paramname);
                        element.value='hitesh';
                        console.log('updated='+JSON.stringify(userData));
                        this.setState({user_data:userData});
                        return;
                    }
                }
            }
        }
    }
}

Or you could use Array.prototype.some to test whether at least one element in the array passes the test implemented by the provided function.

Answer 2

I am getting this error if I run your code as it is ncaught ReferenceError: sport is not defined at RegisterWindow.updateUserData (index.js:51705) If I add var like this (var sport in userData.sports) then I skip that error but then alert(sport.name); produces undefined .

JSON is
{"total_tickets":3,"total_amount":2124,"htmlid_counter":3,"sports":[{"name":"Badminton","ticket_detail":[{"cat":"Men Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":""},{"label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone","type":"text","value":""}],"id":0},{"cat":"Men Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":""},{"label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone","type":"text","value":""}],"id":1},{"cat":"Men Singles","formid":102,"ticket":[{"label":"Name:","paramname":"name","type":"text","value":""},{"label":"Email:","paramname":"email","type":"text","value":""},{"label":"Phone:","paramname":"phone","type":"text","value":""}],"id":2}]},{"name":"Carrom","ticket_detail":[]}],"tournament_id":1}