Post 从 React 到 Node/Express 的请求是控制台记录一个空对象

Question

我知道还有关于此主题的其他提交。我已经浏览了所有热门搜索，但仍然找不到解决方案。

在执行 post 请求时，我只从服务器获取空对象的控制台日志。我哪里错了？提前致谢！

React 表单和组件

    import {useState} from 'react';

const StockInput = () => {

    const [ticker, setTicker] = useState('')

   
    const handleSubmit = (e) => {
         e.preventDefault();
    
        fetch(`http://localhost:5000/api/ticker`, {
             method: 'POST',
             headers: {"Content-Type": "application/json"},
             body: JSON.stringify(ticker)
         }).then(() => {
             console.log(ticker)
         })
    }

    return (
        <form onSubmit = {handleSubmit}>

            <input 
                type='text' 
                onChange={(e) => setTicker(e.target.value)}
                name='tickerInput'
                value={ticker}
            />
            <button>Submit</button>
        </form>
    );
}

export default StockInput;

快递文件

    const express = require('express')
const app = express()
const cors = require('cors')


app.use(express.urlencoded({ extended: true }));

app.use(cors())


app.use('/api/', require('./routes/optionRoute'))

app.post('/api/ticker/', (req,res) => {
   console.log(req.body)
})



const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {
    console.log(`app listening on port ${PORT}`)
})

代理

  "name": "option_scan_next",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:5000",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

Answer 1

快递文件：

通过添加默认中间件来获取您的价值，以将 JSON 正文拉出到您的 req.body 以代替 urlencoded 类型。

app.use(express.json());
// app.use(express.urlencoded({ extended: true }));

前端 React 组件：

您需要将您的代码值放入一个对象中，而不是单独发送该值。

const handleSubmit = (e) => {
     e.preventDefault();
// Add This.
    const body = {data: ticker}
// End


    fetch(`http://localhost:5000/api/ticker`, {
         method: 'POST',
         headers: {"Content-Type": "application/json"},
         body: JSON.stringify(body) // insert object into here.
     }).then((res) => {
         console.log(`Response: ${res}`)
     })
}

Post 从 React 到 Node/Express 的请求是控制台记录一个空对象

Post request from React to Node/ Express is console logging an empty object

post

request

reactjs