未处理的拒绝（typeError）：无法在 google chrome mobile 上使用 reactjs axios 读取未定义的属性

Question

When inputting incorrect information in my google chrome browser in my laptop I get the error response here's a screenshot of the response in my laptop browser using this code

axios
        .post(`${strapi}/auth/local`, loginData)
        .then(res => {
          if (undefined === res.data.jwt) {
            this.setState({error: res.data.message, Loading: false});
            return;
          }

          sessionStorage.setItem('JWT', res.data.jwt);
          sessionStorage.setItem('username', res.data.user.username);
          sessionStorage.setItem('role', res.data.user.role.type);


          this.setState({Loading: false, token: res.data.jwt, username: res.data.user.username, userEmail: res.data.user.email, isLoggedIn: true});
          // window.location.href = '/';
        })
        .catch(err => {
          this.setState({
            error:err.response.data.message[0].messages[0].message
          })
          console.log(this.state.error)
        })

however when logging in to my mobile chrome browser using the same lline of code this appears mobile screenshot

how to fix this issue?

Answer 1

This type of error occur when you are not getting your error.response.

So, what you can do is you can set default message if you get any unknown errors.

     let MESSAGE;

     if(error.response){
         MESSAGE = err.response.data.message[0].messages[0].message
     }else{
          MESSAGE = 'Something went wrong.'
     }

     this.setState({
         error: MESSAGE
      })

Or else you can log your error why this happen

 console.log('error',error)