用户输入未发送到服务器

Question

我的控件看起来像这样

return (
        <div className='contentDiv'>
            <Container>
                <Form onSubmit={getFormData}>
                    <Form.Group className="mb-3" controlId="formBasicName">
                        <Row><Form.Control name="id" type="number" value={3} readOnly={ true }></Form.Control></Row>
                        <Row>
                            <Col>
                                <Form.Label>Forname:</Form.Label> <Form.Control name="firstname" type="text" placeholder="navn"></Form.Control>
                            </Col>
                            <Col>
                                <Form.Label>Efternavn:</Form.Label> <Form.Control name="lastname" type="text" placeholder="Efternavn"></Form.Control>
                            </Col>                           
                        </Row>                                                                      
                    </Form.Group>
                    <Row><Button type="submit">Create user</Button></Row>                    
                </Form>
            </Container>
        </div>
    )

提交时调用的函数如下所示

const getFormData = async (event) => {              
        const data = new FormData(event.currentTarget);
        event.preventDefault();

        await fetch(`/api/newMember`, {
            method: 'POST',
            headers: { 
                "Content-Type": "application/json" 
            },
            body: JSON.stringify(data)
        })
        .then(res => {
            console.log(res);
        })
        .catch(err => {
            console.log(err)
        })        
    };

如果我在客户端中执行此操作（并使用 id=3、firstname=Lucky Lastname=Luke 填写表单）：

for (let [key, value] of data.entries()) {
            console.log(key, value);
        }

我明白（在控制台中）

id 3
firstname Lucky
lastname Luke

不接收客户端数据的服务器post方法，如下所示

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

const app = express();
const port = 3001;

    app.post('/api/newMember', (req, resp) => {
        const { id, firstname, lastname } = req.body;
    
        console.log(req.body);            
        
        const newMember = {
            id: id,
            firstname: firstname,
            lastname: lastname,       
        };        
    
        db('members').insert(newMember)
        .then(res => {
            resp.send(res)        
        })
        .catch(err => {
            console.log(err);
            return;
        })              
    })

app.listen(port, () => {
    console.log('Server listening on port: ' + port);
});

在服务器中，我有以下代码：

console.log(req.body);

。它只是打印

{}

有人能弄清楚我做错了什么吗？谢谢

Answer 1

在路由之前添加边界解析器中间件或使用express.json中间件

const express = require("express");
const knex = require("knex");
const cors = require("cors");
const bodyParser = require("body-parser");

const app = express();
const port = 3001;

app.use(bodyParser.json())

app.post("/api/newMember", (req, resp) => {
  const { id, firstname, lastname } = req.body;

  console.log(req.body);

  const newMember = {
    id: id,
    firstname: firstname,
    lastname: lastname,
  };

  db("members")
    .insert(newMember)
    .then((res) => {
      resp.send(res);
    })
    .catch((err) => {
      console.log(err);
      return;
    });
});

app.listen(port, () => {
  console.log("Server listening on port: " + port);
});