React js break when match happens

Question

我想停止一个循环，当它匹配条件但它只是没有破解试图尝试使用throw e捕获循环并抛出新的typeerror，但它只是不打破如何获得它打破这里是代码我想打破

LoginAuth = (Res) => { 
    try { 
     if (Res.username === this.state.Username && Res.password === this.state.Password) { 
      return (
       this.setState({ 
        isLoggedIn: true, 
       }, function() { 

       }), 
       this.hideModal() 
      ); 
     } else { 
      console.log("Gets to login auth and false"); 
     } 
} 

我想让它停下时state.username和state.password用户输入都等于一个可变RES，但我不能得到它停止循环如何做到这一点。

这是调用本

CheckLoginAuth() { 
    console.log("gets to check login auth"); 
    console.log(this.state.AuthRes); 
    console.log("Username=" + this.state.Username); 
    console.log("Password=" + this.state.Password); 
    var self = this; 
    this.props.AuthRes.forEach(function (Res) { 
     return (
      console.log("ID=" + Res.id), 
      console.log("Username=" + Res.username), 
      console.log("Password=" + Res.password), 
      self.LoginAuth(Res) 
     ); 
    }); 
} 

编辑功能

CheckLoginAuth() { 
    console.log("gets to check login auth"); 
    console.log(this.state.AuthRes); 
    console.log("Username=" + this.state.Username); 
    console.log("Password=" + this.state.Password); 
    this.props.AuthRes.some(function (Res) { 
     console.log("ID=" + Res.id); 
     console.log("Username=" + Res.username); 
     console.log("Password=" + Res.password); 
     if (Res.username === this.state.Username && Res.password === this.state.Password) {// the error is on this line saying it doesnt know what Username or Password are in the state 
      return (
       this.setState({ 
        isLoggedIn: true, 
       }, function() { 
       }), 
       this.hideModal() 
      ); 
     } else { 
      console.log("Gets to login auth and false"); 
     } 
    }); 
} 

错误是无法读取通过未定义

LoginAuth = (Res) => { 
    if (Res.username === this.state.Username && Res.password === this.state.Password) { 
     return (
      this.setState({ 
       isLoggedIn: true, 
      }, function() { 
      }), 
      this.hideModal() 
     ); 
    } else { 
     console.log("Gets to login auth and false"); 
    } 
} 
CheckLoginAuth() { 
    console.log("gets to check login auth"); 
    console.log(this.state.AuthRes); 
    console.log("Username=" + this.state.Username); 
    console.log("Password=" + this.state.Password); 
    var self = this; 
    this.props.AuthRes.every(function (Res) { 
     console.log("ID=" + Res.id); 
     console.log("Username=" + Res.username); 
     console.log("Password=" + Res.password); 
     return (
      self.LoginAuth(Res) 
     ); 
    }); 
} 

循环的特性 '状态'，但停在第一个天气其真假

Answer 1

我已经使它打破

修好了我代码是

LoginAuth = (Res) => { 
if (Res.username === this.state.Username && Res.password === this.state.Password) { 
    return (
     this.setState({ 
      isLoggedIn: true, 
     }, function() { 
     }), 
     this.hideModal() 
    ); 
} else { 
    console.log("Gets to login auth and false"); 
} 
} 
CheckLoginAuth() { 
    console.log("gets to check login auth"); 
    console.log(this.state.AuthRes); 
    console.log("Username=" + this.state.Username); 
    console.log("Password=" + this.state.Password); 
    var self = this; 
    this.props.AuthRes.every(function (Res) { 
     console.log("ID=" + Res.id); 
     console.log("Username=" + Res.username); 
     console.log("Password=" + Res.password); 
     return (
      self.LoginAuth(Res) 
     ); 
    }); 
} 

现在是

LoginAuth = (Res) => { 
    if (Res.username === this.state.Username && Res.password === this.state.Password) { 
      this.setState({ 
       isLoggedIn: true, 
      }) 

      this.hideModal(); 
      return true; 
    } else { 
     console.log("Gets to login auth and false"); 
     return null; 
    } 
} 
CheckLoginAuth() { 
    console.log("gets to check login auth"); 
    console.log(this.state.AuthRes); 
    console.log("Username=" + this.state.Username); 
    console.log("Password=" + this.state.Password); 
    var self = this; 
    this.props.AuthRes.some(function (Res) { 
     console.log("ID=" + Res.id); 
     console.log("Username=" + Res.username); 
     console.log("Password=" + Res.password); 
     return self.LoginAuth(Res); 
    }); 
} 

我并没有返回truthy值或

Answer 2

无法停止执行forEach()。事实上，MDN指出：

有没有办法阻止或破坏不是抛出一个异常以外的forEach()循环。如果您需要这种行为，则forEach()方法是错误的工具。改用一个简单的循环。如果要为谓词测试数组元素并需要布尔返回值，则可以使用every()或some()。

因此，如建议，您可以使用some()来代替。

some()一旦执行函数callback每个数组中存在的元件，直到它找到一个其中回调返回truthy值（当转换为一个布尔值，成为真值）。如果找到这样的元素，some()立即返回true。否则，some()返回false。

---

所以，你的功能可以改为写为：

this.props.AuthRes.some(function (Res) { 
    return (
     console.log("ID=" + Res.id), 
     console.log("Username=" + Res.username), 
     console.log("Password=" + Res.password), 
     self.LoginAuth(Res) 
    ); 
}); 

这将停止迭代一旦回调返回true，或者直到用完元素来遍历。

---

编辑

为了解决Cannot read property 'state' of undefined错误，最简单的方法是使用箭头功能：

this.props.AuthRes.some((Res) => {