React не может отображать уведомление о 401 response.statusText для несанкционированного входа, также это неопределенное предупреждение?

Question

Я пытаюсь намеренно отобразить уведомление, показывающее, что учетные данные пользователя неверны или неавторизованы. Пока ничего не отображается

Ниже представлен компонент React:

import React, {Component} from 'react';
import ReactDom from "react-dom";
import '../css/app.scss';
import 'bootstrap';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';

export class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            email:'',
            password:'',
            username:'',
            errorMsg:'',
            hasError: false
        }
    }

    handleClick() {
        fetch('/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
                'credentials': "same-origin"
            },
            body: JSON.stringify({
                'email' : this.state.email,
                'password' : this.state.password,
                'username' : this.state.username
            })
        })
        .then(function(response) {
            if (!response.ok) {
                if (response.status === 401) {
                    console.log(response.statusText);
                    this.setState({'hasError': true});
                    this.setState({'errorMsg': response.statusText})
                }
            }
        })
        .catch(error => console.log(error) );
    }

    render() {
        const hasError = this.state.hasError;
        let hasErrorDiv;

        if (hasError) {
            hasErrorDiv = <div id="mAlert" className="alert alert-danger">{this.state.errorMsg}</div>;
        } else {
            hasErrorDiv = <div id="mAlert" ></div>;
        };
        return (
            <div className="container">
                <div>
                    {hasErrorDiv}
                    <TextField
                        type="text"
                        hinttext="Enter your username"
                        floatinglabeltext="username"
                        onChange = {(event) => this.setState({username:event.currentTarget.value})}
                    />
                    <br/>
                    <TextField
                        type="email"
                        hinttext="Enter your email"
                        floatinglabeltext="email"
                        onChange = {(event) => this.setState({email:event.currentTarget.value})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hinttext="Enter your Password"
                        floatinglabeltext="Password"
                        onChange = {(event) => this.setState({password:event.currentTarget.value})}
                    />
                    <br/>
                    <Button label="Login" onClick={() => this.handleClick()}>
                        Login
                    </Button>
                </div>
            </div>
        );
    }
}

ReactDom.render(<Login />, document.getElementById('Login'));

Как вы можете видеть на следующем снимке экрана:

Я хотел бы показать ошибку конечному пользователю

Также в консоли что-то странное, потому что я подумал, что ответ 401 не считается ошибкой, так что ошибка catch, отображаемая в консоли, относится к?

Заранее спасибо

Answer 1

Хорошо, мне пришлось создать свой собственный процесс уведомлений для обработки ошибок 401.

Во-первых, не все уведомления работают с React 16.13.2

Во-вторых, сообщение об ошибке «это undefined "пришло из улова, не понимая, что конкретно" this ".

В-третьих, мне пришлось использовать тип asyn c, а затем использовать await - для ожидания ответа, который будет возвращен из запрос POST.

В-четвертых, мне пришлось использовать. json, чтобы иметь возможность прочитать ошибку, которая была в JSON - {'error': 'Invalid credentials'} - см. снимок экрана ниже

Вот мой код:

import React, {Component} from 'react';
import ReactDom from "react-dom";
import '../css/app.scss';
import 'bootstrap';
import TextField from '@material-ui/core/TextField';
import Button from '@material-ui/core/Button';
import $ from 'jquery';

export class Login extends Component {
    constructor(props){
        super(props);
        this.state={
            email:'',
            password:'',
            username:'',
            errorMsg:'',
            hasError: false
        };
        this.handleClick = this.handleClick.bind(this);
    }

    componentDidMount() {
        // console.log(React.version);
    }

    setNotifications(param) {
        // console.log('makes it to setNotification func');
        let notifications = $('#notificaitons');
        notifications.addClass("alert alert-danger");
        notifications.html(param.error);
    }

    async handleClick() {
        const requestOptions = {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Accept': 'application/json',
                'credentials': "same-origin"
            },
            body: JSON.stringify({
                'email' : this.state.email,
                'password' : this.state.password,
                'username' : this.state.username
            })
        };
        const response = await fetch('/login', requestOptions);
        const data = await response.json();
        this.setState({ errorMsg: data.error });
        this.setNotifications(data);
    }

    render() {
        return (
            <div className="container">
                <div>
                    <div id="notificaitons"></div>
                    <TextField
                        type="text"
                        hinttext="Enter your username"
                        floatinglabeltext="username"
                        onChange = {(event) => this.setState({username:event.currentTarget.value})}
                    />
                    <br/>
                    <TextField
                        type="email"
                        hinttext="Enter your email"
                        floatinglabeltext="email"
                        onChange = {(event) => this.setState({email:event.currentTarget.value})}
                    />
                    <br/>
                    <TextField
                        type="password"
                        hinttext="Enter your Password"
                        floatinglabeltext="Password"
                        onChange = {(event) => this.setState({password:event.currentTarget.value})}
                    />
                    <br/>
                    <Button label="Login" onClick={() => this.handleClick()}>
                        Login
                    </Button>
                </div>
            </div>
        );
    }
}

ReactDom.render(<Login />, document.getElementById('Login'));

Теперь разрешено, мне нужно сделать гораздо больше кодирования, например, как чтобы очистить уведомление, возможно, какое-то исчезновение, и, вероятно, придется сделать какое-то уведомление об успехе вместе с версией предупреждения, но, по крайней мере, это работает.

Кстати, это просто div, в который я добавляю класс of 'alert alert-dangerous', вместе с добавлением содержимого через. html. Чтобы сделать успешную версию, я добавлю класс «alert alert-success» и т. Д.