Question

React Js Context Uncaught（在承诺中）TypeError：无法读取未定义的属性“数据”

2020-06-03

1492

javascript reactjs

我正在使用 React 并从 api 请求数据，但似乎我的“数据”出现错误

我的类如下：

class Login extends Component {
  constructor() {
    super();

this.state = {
  UserName: '',
  Password: '',
  var:'',
}
this.Login = this.Login.bind(this);

  }

  Login(event) {
    debugger;
    api.post('/api/login', {
      UserName: this.state.UserName,
      Password: this.state.Password,
    })
      .then((result) => {
        if (result.data.Status === 'Success') {
          this.setState({var: result.data.status});
          alert("User login Successfully");                                                                                                         
        } else {
          alert('Invalid User');
        }
        debugger;
      })
  }

我正在尝试登录。用户发出请求后，我将从 api 和 setState 我的 var 获取一些数据

错误提示我的 result.data.Success 是错误的。我在 stack overflow 上进行了一些研究，它提到了我使用的 Arrow Function 。或者是任何 snytax 错误？

Answer 1

看起来您的 api 可能会产生 undefined 作为响应。

因此请检查结果

.then((result) => {
        if (result && result.data.Status === 'Success') {

Answer 2

我认为 result.data.data.Status 是正确的方式。或者你可以用 console.log() 或调试器打印它来查看结果是什么格式

Answer 3

好吧，这是我的错。我的登录的总体过程是，我的 API 将在用户成功登录后返回一个 token。稍后，在我的另一个 js 中，导出 default api 正在使用来自 axios 的拦截器。我在那里设置了一个 gettoken 函数，但起初我正在处理登录，因此我的前端没有存储 token。结果，拦截返回错误 - 这导致未定义

我的 Api 代码如下：

import {Component} from 'react';
import axios from 'axios';

const instance = axios.create({
    baseURL: 'http://localhost:9999/'
});

instance.interceptors.request.use(function (config) {
    config.localStorgae.getItem('token');
    return config;
}, function (error) {
    return Promise.reject(error);
});