Question

我的REST API的原因是：{"error":"Auth failed. User does not exist"}。我尝试在React中使用setState将此错误保存到我的状态，但是我遇到了以下错误：无法读取未定义的属性“错误”。有什么问题吗？

export const login = user =>
  axios
    .post('http://localhost:3000/api/users/login', {
      login: user.login,
      password: user.password,
    })
    .then(res => {
      localStorage.setItem('userToken', res.data.token);
      return res.data.token;
    })
    .catch(err => {
      console.log(err);
    });

React.js中的功能：

  onSubmit(e) {
    e.preventDefault();

    const user = {
      login: this.state.login,
      password: this.state.password,
    };

    login(user).then(res => {
      if (!res.error) { // <- this error: TypeError: Cannot read property 'error' of undefined
        this.props.history.push(`/dashboard`);
      } else {
        this.setState({ error: res.error });
      }
    });
  }

这是我的后端代码：

    // Login Action
...
              return res.status(200).json({
                message: 'Auth successful',
                token,
              });
            }
            res
              .status(400)
              .json({ error: 'Auth failed. The password is incorrect.' });
          } else {
            res.status(400).json({ error: 'Auth failed. User does not exist' });
          }
        })
        .catch(err => {
          res.status(400).json({ error: err });
        });
    };

Answer 1

尝试一下：

login(user).then(() => this.props.history.push(`/dashboard`))
.catch(error=>this.setState({ error })

但是，也许还有另一个问题，您通常无法推动陈述您对不变性的关注方式。我想你知道，但我发帖以防万一：

this.setState({ history: [...this.state.history, `/dashboard`] })

Answer 2

尝试一下；

export const login = user =>
axios
.post('http://localhost:3000/api/users/login', {
  login: user.login,
  password: user.password,
})
.then(res => {
  localStorage.setItem('userToken', res.data.token);
})
.then(() => return localStorage.getItem('userToken');)
.catch(err => {
  console.log(err);
});

Answer 3

由于后端返回的响应带有400状态代码，因此您必须在登录功能的catch块中进行处理。现在，您正在将错误写入控制台，并且未返回任何内容，这就是为什么您的React响应中的登录响应未定义而导致该错误的原因。要解决此问题，请更改登录功能的catch块，使其看起来像这样

 .catch(err => {
    console.log(err);
    return {error:err};
});

无法读取未定义的属性“错误”。有什么问题？

3 个答案: