如何向React.js GUI传递数据？用户名被占用时如何向前端返回对应提示

核心结论 #

React 是运行在浏览器端的前端框架，本身无法直接接收 POST 请求：HTTP 协议中只有服务端可以接收请求，浏览器作为客户端只能主动发起请求、接收服务端返回的响应。你这个场景不需要让 React 接收 POST，按常规的请求-响应模式改造即可实现效果。

第一步：改造后端接口返回响应 #

你当前的后端代码仅在服务端控制台打印日志，没有给前端返回任何响应，首先需要调整接口逻辑，根据操作结果返回对应状态和提示：

signup.post('/signup', urlendcodedParser, async(req: Request, res: Response) => {
    try {
        const username = req.body.username;
        const password = req.body.password;
        const age = req.body.age;
        const email = req.body.email;
        const fullname = req.body.fullname;
        
        const data = await pool.query("SELECT * FROM allusers WHERE username = $1", [username])
        if(data.rows[0] === undefined){
            await pool.query("INSERT INTO allusers (username, userpassword, email, fullname, age) VALUES ($1, $2, $3, $4, $5) RETURNING *", [username, password ,email, fullname, age])
            // 注册成功返回成功响应
            return res.status(200).json({
                code: 0,
                msg: "账号创建成功"
            })
        } else {
            // 用户名占用返回对应提示
            return res.status(409).json({
                code: 1,
                msg: "用户名已被占用"
            })
        }
    } catch (err) {
        console.log(err)
        return res.status(500).json({
            code: 2,
            msg: "服务端错误"
        })
    }
})

第二步：React 端发起请求并处理响应 #

在 React 的注册页面逻辑中，用户点击提交按钮时主动发起 POST 请求到后端 /signup 接口，拿到响应后根据返回结果展示对应提示即可，示例代码如下：

import { useState } from 'react'

function SignupPage() {
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')
  const [tip, setTip] = useState('')

  const handleSubmit = async (e) => {
    e.preventDefault()
    setTip('')
    try {
      const res = await fetch('你的后端地址/signup', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        body: new URLSearchParams({
          username,
          password
          // 其余注册参数自行补全
        })
      })
      const data = await res.json()
      setTip(data.msg)
    } catch (err) {
      setTip('请求失败，请稍后重试')
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input value={username} onChange={e => setUsername(e.target.value)} placeholder="用户名" />
      <input type="password" value={password} onChange={e => setPassword(e.target.value)} placeholder="密码" />
      <button type="submit">注册</button>
      {tip && <p>{tip}</p>}
    </form>
  )
}

export default SignupPage

服务端主动推送场景的可选实现方案 #

如果你后续有需要服务端主动给前端发消息的场景（比如即时通知、实时数据更新等），可以用以下方案：

• WebSocket：全双工通信协议，前后端建立长连接后双方都可以主动发消息，适合实时性要求高的场景
• Server-Sent Events(SSE)：单向通信协议，仅支持服务端主动向客户端推送消息，实现比 WebSocket 更简单

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