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

Question

在笔记本电脑的 google chrome 浏览器中输入不正确的信息时，我收到错误响应，这是使用此代码在笔记本电脑浏览器中的响应屏幕截图

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)
        })

但是，当使用相同的代码行登录我的移动 chrome 浏览器时，会出现移动屏幕截图

如何解决这个问题？

Answer 1

当您没有收到 error.response 时，就会发生这种类型的错误。

因此，如果您遇到任何未知错误，您可以设置默认消息。

     let MESSAGE;

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

     this.setState({
         error: MESSAGE
      })

否则你可以记录你的错误为什么会发生这种情况

 console.log('error',error)