Как вы передаете ошибку входа в систему после отправки формы?

Question

У меня есть компонент входа, записанный в reactJS, он использует ax ios для выполнения конечной точки входа в систему. Если логин не удастся по уважительным причинам, я сохраняю логинеррор в состоянии. Затем у меня есть тег div в возвращаемой части JSX, которая должна отображать ошибку. Однако это сообщение не отображается. Я понимаю, что JSX запускается до завершения вызова asyn c. Как мне решить проблему?

handleSubmit(event) {
    const { email, password} = this.state;

    axios
      .post(
        "http://localhost:4000/users/login",
        {         
            email: email,
            password: password        
        }
      )
      .then(response => {
        if (response.status ===200) {
          this.props.handleSuccessfulAuth(response.data);          
        }
      })
      .catch(error => {
        this.setState({loginErrors:error}) 
      });
    event.preventDefault();
  }


return(<div>{this.state.state.loginError}</div>)

Answer 1

this.state.state.loginError Вероятно, должно быть this.state.loginError

Более того, ошибка, возвращаемая ax ios, является не простым сообщением, а объектом.

Вам нужно будет получить доступ к собственности в нем, если вы хотите что-то показать. Таким образом, это будет this.state.loginError.response.message или просто установите исходное состояние для сообщения

Проверьте это для ссылки: https://github.com/axios/axios#handling -errors