Реагируйте: Как отобразить ошибку при неверном входе пользователя - PullRequest
Новая
       62

Реагируйте: Как отобразить ошибку при неверном входе пользователя

1 голос
/ 13 октября 2019

Я новичок в React и реализовывал функцию, при которой при нажатии кнопки в методе рендеринга я перехожу к функции foo. В этой функции я отправляю имя пользователя и пароль на сервер.

Если имя пользователя и пароль верны, он возвращает объект JSON, такой как 

{"Result":1,"Cookie":"COOKIE!!!"}

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

Я пробовал читать много постов, но не могу этого сделать. Проблема в том, что я хочу напечатать что-то на веб-странице, но это можно сделать только при рендере. Когда я получаю cookie, я нахожусь в функции foo, поэтому не знаю, как напечатать сообщение об ошибке.

Я также не знаю, как перенести его на новую страницу при успешной аутентификации, то есть в cookie. будет 1 

import React from 'react';
import './style.scss';
import LoginImage from './LoginImage.png'
import Button from 'react-bootstrap/Button'
import Form from 'react-bootstrap/Form'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
//import Logfailed from './Logfailed'
import Flood from './Flood'

class UserLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {userName:'', password:'', act:'l', flag:0};
    this.handleChange1 = this.handleChange1.bind(this);
    this.handleChange2 = this.handleChange2.bind(this);
    this.handleClick = this.handleClick.bind(this);
  }

   async handleClick(e) {
    const url = 'http://52.8.557.164/user'
    const data = {username:this.state.userName, password:this.state.password, action:this.state.act};
    try {
        const response = await fetch(url, 
        {
            method: 'POST',
            body: JSON.stringify(data),
            headers: {
                'Content-Type': 'application/json'
            },
        });
        const json = await response.json();
      if(json['Result'] === 1) {
        this.state.flag=1; 
      }
      else {
        this.state.flag=2;
      }
        console.log('Success', JSON.stringify(json));
      console.log(json['Cookie']);
    } catch (error) {
        console.error('Error', error);
    }

 }

 handleChange1(e) {
  this.setState({userName: e.target.value})
 }
 handleChange2(e) {
  this.setState({password: e.target.value})
 }


render() {
  const err = this.state.flag;
    return (
        <div className = 'outer-container' ref={this.props.containerRef}> 
            <div className = 'header'> Login </div>
            <div className="content">
      <div className="image">
              <img src={LoginImage} />
      </div>

            <Form className = 'form'>
        <Form.Group controlId="formBasicEmail" className = 'form-group'>
          <Form.Label style={{marginTop: '90px'}}>Username</Form.Label>
          <Form.Text className="text-muted" htmlFor="username"></Form.Text>
          <input type="text" value = {this.state.userName} name="username" placeholder="username" onChange={this.handleChange1}/>
        </Form.Group>
        <Form.Group controlId="formBasicPassword" className = 'form-group'>
        <Form.Label>Password</Form.Label>
        <Form.Text className="text-muted" htmlFor="password"></Form.Text>
          <input type="password" value = {this.state.password}  name="password" placeholder="password" onChange={this.handleChange2} />
        </Form.Group>
        </Form>
            </div>
            <div className="footer">
                <Button variant="outline-primary" size="lg" onClick={this.handleClick} className="btn" block>
                    Login
                </Button>
            </div>
         </div>
    );
}   
}

export default UserLogin;

1 Ответ

0 голосов
/ 13 октября 2019

Прежде всего, в вашем методе handleClick () вы пытаетесь напрямую изменить состояние вашего компонента вместо использования встроенного в React метода setState (). Это предотвратит реакцию вашего пользовательского интерфейса на обновление, поскольку React не сможет узнать, изменилось ли состояние вашего компонента. 

if(json['Result'] === 1) {
    this.state.flag=1; 
} else {
    this.state.flag=2;
}

Вместо этого, если вы замените этот код на: 

if(json['Result'] === 1) {
    this.setState({flag: 1}); 
} else {
    this.setState({flag: 2}); 
}

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

Далее, если вы хотите отобразить предупреждающее сообщение для пользователя, когда свойство флага равно 2, просто добавьте условное выражение в ваш JSX. 

{ this.state.flag === 2 && <p>Your login credentials could not be verified, please try again.</p>}

Что это значитзаключается в том, что тег <p> будет оцениваться (и, следовательно, обрабатываться), только если первая часть выражения, то есть this.state.flag === 2, будет иметь значение true.

Если вы хотите перенаправить пользователя на другой маршрут после успешного завершениявойдите в систему, просто импортируйте компонент Redirect из react-router-dom и замените оператор return в вашем методе render () следующим: 

if (this.state.flag === 1) {
    return <Redirect to='/route' />
}

// else
return (
    <div className = 'outer-container' ref={this.props.containerRef}>
    // ... add the rest of your JSX
)

Для получения дополнительной информации об этом решении см. thisссылка .

Итак, ваш метод render () может выглядеть примерно так: 

render() {
    if (this.state.flag === 1) {
        return <Redirect to='/route' />
    }

    // else
    return (
        <div className = 'outer-container' ref={this.props.containerRef}>
            <div className = 'header'> Login </div>
            <div className="content">
                <div className="image">
                    <img src={LoginImage} />
                </div>
                { this.state.flag === 2 && <p>Your login credentials could not be verified, please try again.</p>}
                // ... add the rest of your JSX
    )
}


~~~ UPDATE ~~~

Если подход <Redirect> неork, есть и другой способ, который мы можем попробовать (также подробно здесь ). Мы можем перенаправить пользователя программно после того, как ваш запрос на выборку разрешится, при условии, что мы получим верный флаг от API. Таким образом, вы можете попробовать: 

if(json['Result'] === 1) {
    this.setState({ flag: 1 }); 
    this.props.history.push('/route')
}

Для того, чтобы использовать этот подход, вам также нужно будет обернуть ваш компонент с withRouter HOF в вашем операторе экспорта. Поэтому вместо: 

export default MyComponent

Вам нужно будет сделать: 

export default withRouter(MyComponent)

Просто убедитесь, что вы импортировали withRouter из react-router-dom.

Если вы беретеПри таком подходе вам больше не понадобится этот блок кода: 

if (this.state.flag === 1) {
    return <Redirect to='/route' />
}
...