Javascript 在React中处理异常和捕获错误的正确方法是什么？

我有一个用javascript编写的函数来检查登录详细信息是否正确。 这就是功能：-

 login:(phone,key)=>{
        const regId=md5(phone);
        localStorage.setItem('regId',regId);
        return fetch(
            `${serverAddress}/api/account/login?phone=${phone}&key=${key}&regId=${regId}&appType=M`,
            {
                method:'POST',
                accept:'application/json',
            }
        ).then((res)=>{
            if(res.ok){
                return res.json();
            }else{
                throw new Error('Fetch Error');
            }
        });
    },

此函数写入我在路由中访问的客户机文件中，如下所示：-

class Login extends Component{
    constructor(){
      super();
      this.state = {
        redirect:false,
        email: "",
        password: ""

      }
    }


    checker(){
            var phone=8724055040;
            var pass=9435363285;
            Client.login(phone,pass).then(res=>{
                this.setState({
                    redirect:true           
                });
            })   
    }          

    render(){
        if(this.state.redirect){
            return(
                <div>HEY</div>
            )
        }
        else{
            return(
                <form>
                      Phone: <input type="text" name="pno"></input><br></br>
                      Password: <input type="text" name="pass"></input><br></br>
                      <input type="submit" value="Submit" onClick={this.checker}></input>
                 </form>                
            );
        }
    }
}
export default Login

---

如何修复此问题并使其成为我想要的样子？

尝试下面的方法捕获异常处理并使用下面的链接

---

请确保在checker函数中使用event.preventDefault（）。这并不能回答问题，但应该可以阻止url栏的更改。检查器必须将事件作为参数。在手机上，否则我会给你一个答案。当然…然后当你到达你的电脑时给我一个答案…那会有帮助的

http://localhost:3000/login?pno=8724055040&pass=9435363285

fetch("http://httpstat.us/500")
    .then(function() {
        console.log("ok");
    }).catch(function() {
        console.log("error");
    });