Question

我正在尝试从我的反应前端传递数据，该前端是使用钩子建立的，它传递给我的节点/表达服务器。

当我尝试在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')
  }
})

反应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>
  )
}

Answer 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>
  )
....

我建议这样做。

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

1 个答案: