Блог

В моем компоненте login react я пытаюсь отобразить ошибку «неправильные учетные данные» в моем вспомогательном тексте, но при вводе ложных учетных данных текст не отображается. Есть предложения относительно того, почему? На данный момент я помещаю сообщение об ошибке в массив, присваиваю этой ошибке значение state, а затем ссылаюсь на это состояние в моем helperText prop. Вот код из моего компонента входа в систему:

 import React from 'react'
import Header from './Header'
import TextField from "@material-ui/core/TextField";
import Button from '@material-ui/core/Button'
import axios from 'axios'
import {Link} from 'react-router-dom'
import firebase from 'firebase'
import {auth} from 'firebase/app'


class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: "",
      errors:[]
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }



  handleChange(e) {
    this.setState({
      [e.target.name]: e.target.value,
    });
  }

  handleSubmit(e) {
    e.preventDefault()
    const { email, password } = this.state
    const { history } = this.props
    const errorLog = []
    this.setState({
      errors: errorLog
    })
    auth().signInWithEmailAndPassword(email, password)
      .then((res) => {
        console.log(res)
        history.push('/gigregister')
      })
      .catch((err) => {
        if(err.code = 'auth/wrong-password'){
         errorLog.push('Wrong credentials, please try again')
         console.log(`this is error state ${this.state.errors}`)
        }
      })
  }

  render() {
  
    return (
      <>
        <div>
          <Header />
        </div>
        <div className ='gig-button'>
        <Link to="/Homepage" style={{ textDecoration: "none" }}>
         <Button>Gigs this week</Button>
        </Link>
        </div>
        <div className="login-main">
          <div className="login">
            <h4>Venue login</h4>
            <form onSubmit={this.handleSubmit}>
            <TextField
                placeholder="Enter email"
                id="email"
                name="email"
                onChange={this.handleChange}
              />
              <TextField
                placeholder="Enter password"
                id="password"
                name="password"
                error ={this.state.errors ? true : false}
                helperText = {this.state.errors}
                onChange={this.handleChange}
              />
              <div className="button">
                <Button type="submit">Submit</Button>
              </div>
            </form>
          </div>
          <Link to="/venueregister" style={{ textDecoration: "none" }}>
            <Button>Register a venue</Button>
          </Link>
        </div>
      </>
    );
  }
}

export default Login;
  

Что-то не так с вашим утверждением условия

 if(err.code = 'auth/wrong-password'){
  

Я думаю, вы хотели сравнить эти значения, например, == или === .

Что касается ошибок, которые не отображаются

На данный момент я отправляю сообщение об ошибке в массив, присваивая эту ошибку состоянию

Вы не устанавливаете состояние после нажатия на errorLog массив — просто обновите состояние после нажатия на него.

 .catch((err) => {
  if(err.code === 'auth/wrong-password'){
    errorLog.push('Wrong credentials, please try again')
    this.setState({
      errors: errorLog
    });
  }
})