如何在React前端展示后端预定义的表单校验与操作结果提示

你现在的代码有两个核心缺口：后端仅在服务端控制台打印日志，没有把处理结果通过HTTP响应返回给前端；前端没有预留存储、渲染响应结果的逻辑，按下面两步修改即可实现需求。

第一步：修改后端登录接口，返回结构化响应 #

原有代码仅做服务端日志打印，没有给前端返回任何内容，调整为不同处理结果对应返回明确的状态码和消息体，所有分支必须加return避免重复发送响应报错：

app.post("/login", (req, res)=> {
   const email = req.body.email;
   const password = req.body.password
   const sql_email = "SELECT * FROM userTable WHERE email = ?"; 
   connection.query(sql_email, [email], function (error, result) {
    // 先处理数据库查询异常
    if (error) {
      return res.status(500).json({
        success: false,
        message: "服务异常，请稍后再试"
      })
    }
    if (!result.length) {
        console.log("User not found");
        return res.status(401).json({
          success: false,
          message: "用户不存在"
        })
    } 
    const verified = bcrypt.compareSync(password, result[0].password);
    if (verified){
        console.log("You have successfully logged in");
        return res.status(200).json({
          success: true,
          message: "登录成功"
        })
    } 
    else{
        console.log("Invalid password");
        return res.status(401).json({
          success: false,
          message: "密码错误"
        })
   }}});
}); 

你可以根据需要把提示文本换回英文，不影响逻辑运行。

第二步：修改前端登录页，接收并展示返回结果 #

前端新增一个状态存储后端返回的提示内容，请求时区分成功/错误场景接收响应，最后把提示渲染到页面对应位置即可，修改后的完整代码如下：

import React, {  useState } from "react";
import Axios from "axios";
import "../App.css";
import {Link} from "react-router-dom";
export default function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  // 新增状态存提示：success标记结果类型，message存提示文本
  const [tip, setTip] = useState({success: null, message: ""});

  const infoentered = ()=>{
    // 发请求前清空上一次的提示
    setTip({success: null, message: ""})
    Axios.post('http://localhost:3000/login', {email:email, password: password})
    .then((res)=>{
      // 200成功状态走这里，存储成功提示
      setTip({
        success: res.data.success,
        message: res.data.message
      })
      // 后续可以在这里加登录成功后的跳转逻辑，比如跳转到首页
    })
    .catch((err)=>{
      // 401/500等错误状态走这里，从错误响应中提取提示
      setTip({
        success: err.response.data.success,
        message: err.response.data.message
      })
    })
  };

  return (
    <div className="App">
      <div className="details">
        <h2>Login</h2>
        {/* 有提示内容时才渲染提示框，成功显示绿色、失败显示红色 */}
        {tip.message && (
          <div 
            style={{
              padding: "8px 12px",
              margin: "10px 0",
              borderRadius: "4px",
              color: "#fff",
              backgroundColor: tip.success ? "#52c41a" : "#ff4d4f"
            }}
          >
            {tip.message}
          </div>
        )}
        <label>Email</label>
        <input type="text" onChange={(event)=>{
          setEmail(event.target.value);
        }}/>
        <label>Password</label>
        {/* 原代码密码框type为text会明文显示，改成password符合常规交互 */}
        <input type="password" onChange={(event)=>{
          setPassword(event.target.value);
        }}/>
        <button onClick={infoentered}>Enter</button>
        <Link to="/forgotpassword" className="forgot-password">Forgot Password</Link>
      </div>
    </div>
  )
}

• 提示样式写了内联样式，不需要额外修改CSS文件就能直接看到效果，你也可以根据自己的设计稿调整样式。
• 如果需要加前端表单校验（比如邮箱格式不对、密码为空的提示），可以直接复用这个tip状态，在发请求前给setTip赋值即可。

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