如何将数据从 React 前端 Hooks 传递到 Express 后端答案

【问题标题】：How to pass data from React front end Hooks to Express backend如何将数据从 React 前端 Hooks 传递到 Express 后端
【发布时间】：2020-08-14 04:45:30
【问题描述】：

我正在尝试将数据从我使用挂钩设置的 react 前端传递到我的节点/express 服务器。

当我尝试在 express 后端控制台记录请求 (userLog) 时，正文内容为空。有人可以帮我吗？谢谢！

Express NodeJS app.js

const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')

const app = express()

app.use(bodyParser.urlencoded({ extended: false }))

app.use(
  cors({
    origin: 'http://localhost:3000',
    credentials: true
  })
)

app.set('view engine', 'ejs')

app
  .route('/api/hello')
  .get((req, res) => {
    res.send('Express Server Online')
  })

  .post((req, res) => {
    console.log(req.userLog)
  })

app.listen(5000, function(err) {
  if (!err) {
    console.log('Express Server started successfully at Port 5000')
  }
})

React App.js 前端

import React from 'react'

function App() {
  const [userLog, setUserLog] = useState({
    register: false,
    login: false
  })

  function recordUser(event) {
    const eventName = event.target.name
    setUserLog(prevValue => {
      return { ...prevValue, [eventName]: true }
    })
    axios.post('http://localhost:5000/api/hello', userLog).then(res => {
      console.log(res)
      console.log(res.data)
    })
  }
  
  return (
    <div>
      <a className="nav-link " onClick={recordUser} href="#" name="login">
        Login <span className="sr-only">(current)</span>
      </a>
    </div>
  )
}

【问题讨论】：

你有没有尝试在 express 请求处理程序中执行 console.log 以了解来自 React 组件的 ajax 调用是否到达 express API
是的......发布请求正在到达 express 节点，（我在控制台中记录了这个以验证），但是请求的正文是空白的。

标签： javascript reactjs express

【解决方案1】：

您正在使用一个标签来执行一个功能，这并不理想，您必须将它放在一个按钮标签中，并且您必须先阻止默认操作。您的 POST => /api/hello 路由也没有响应。你必须返回一些东西才能抓住它。

...
  function recordUser(event) {
    event.preventDefault();
    const eventName = event.target.name
    setUserLog(prevValue => {
      return { ...prevValue, [eventName]: true }
    })
    axios.post('http://localhost:5000/api/hello', userLog).then(res => {
      console.log(res)
      console.log(res.data)
    })
  }
  
  return (
    <div>
      <button className="nav-link " onClick={recordUser}>
        Login <span className="sr-only">(current)</span>
      </button>
    </div>
  )
....

我建议这样做。

【讨论】：