React函数组件转类组件后登录错误提示不显示问题求助

核心问题：renderErrorMessage函数无返回值 #

你的renderErrorMessage函数里，虽然写了条件渲染的JSX，但没有返回这个元素，导致调用时返回undefined，错误信息自然不会显示。

修复方法：给函数添加return语句，直接返回对应的错误元素：

// 修复后的renderErrorMessage
const renderErrorMessage = (name) =>{
  console.log("renderErrorMessage, this.state.errorMessages.name = "+this.state.errorMessages.name);
  console.log("renderErrorMessage, this.state.errorMessages.message = "+this.state.errorMessages.message);
  // 添加return返回JSX元素
  return name === this.state.errorMessages.name && (
    <div className="error">{this.state.errorMessages.message}</div>
  );
}

可选优化：替换DOM操作的表单取值方式 #

原代码中通过document.forms[0]获取输入值，不符合React数据流规范，建议换成表单Ref实现：

1. 在constructor中创建表单Ref：

constructor(props){
  super(props);
  this.state = {errorMessages : {}, isSubmitted : false};
  // 添加表单ref
  this.loginForm = React.createRef();
}

2. 修改表单的ref属性：

<form ref={this.loginForm} onSubmit={handleSubmit}>

3. 修改handleSubmit中的取值逻辑：

const handleSubmit = (event) => {
  event.preventDefault();
  console.log("handleSubmit");
  // 通过ref获取表单元素，替代document.forms[0]
  const { uname, pass } = this.loginForm.current;
  console.log("handleSubmit, uname = "+uname.value);
  console.log("handleSubmit, pass = "+pass.value);
  
  // 后续逻辑不变...
};

完整修复后的代码 #

import React, { Component } from 'react';
import './Login.css';

export default class Login extends Component {
  constructor(props){
    super(props);
    this.state = {errorMessages : {}, isSubmitted : false};
    this.loginForm = React.createRef();
  }
  
  render() {
    // User Login info
    const database = [
      {username: "user1", password: "pass1"},
      {username: "user2", password: "pass2"}
    ];

    const errors = {
      uname: "invalid username",
      pass: "invalid password"
    };

    const handleSubmit = (event) => {
      event.preventDefault();
      console.log("handleSubmit");
      const { uname, pass } = this.loginForm.current;
      console.log("handleSubmit, uname = "+uname.value);
      console.log("handleSubmit, pass = "+pass.value);
      
      const userData = database.find((param) => param.username === uname.value);
      console.log("handleSubmit, userData = "+userData);
      
      if (userData) {
        console.log("handleSubmit, inside if, userData = "+userData);
        console.log("handleSubmit, inside if, userData.password = "+userData.password);
        if (userData.password !== pass.value) {
          console.log("//Invalid password");
          this.setState({errorMessages : { name: "pass", message: errors.pass }});
        } else {
          this.setState({isSubmitted : true} );
        }
      } else {
        console.log("handleSubmit, inside else");
        this.setState({errorMessages : { name: "uname", message: errors.uname }});
      }
    };

    // Generate JSX code for error message
    const renderErrorMessage = (name) =>{
      console.log("renderErrorMessage, this.state.errorMessages.name = "+this.state.errorMessages.name);
      console.log("renderErrorMessage, this.state.errorMessages.message = "+this.state.errorMessages.message);
      return name === this.state.errorMessages.name && (
        <div className="error">{this.state.errorMessages.message}</div>
      );
    }

    // JSX code for login form
    const renderForm = (
      <div className="form">
        <form ref={this.loginForm} onSubmit={handleSubmit}>
          <div className="input-container">
            <label>Username </label>
            <input type="text" name="uname" required />
            <div>{renderErrorMessage("uname")}</div>
          </div>
          <div className="input-container">
            <label>Password </label>
            <input type="password" name="pass" required />
            <div>{renderErrorMessage("pass")}</div>
          </div>
          <div className="button-container">
            <input type="submit" />
          </div>
        </form>
      </div>
    );

    return (
      <div className="app">
        <div className="login-form">
          <div className="title">Sign In</div>
          {this.state.isSubmitted ? <div>User is successfully logged in</div> : renderForm}
        </div>
      </div>
    );
  }
}

内容的提问来源于stack exchange，提问作者Anish Mittal