Material UI/React - 辅助文本未显示答案

【问题标题】：Material UI/React - helper text not showingMaterial UI/React - 辅助文本未显示
【发布时间】：2021-01-19 21:45:06
【问题描述】：

在我的登录反应组件中，我试图在我的帮助文本中显示“错误的凭据”错误 - 但在输入错误的凭据后，不会出现任何文本。关于为什么的任何建议？目前我正在将一条错误消息推送到一个数组中，将该错误分配给状态，然后在我的 helperText 道具中引用该状态。这是我的登录组件中的代码：

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;

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

你的条件语句有问题

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
    });
  }
})

【讨论】：