req.body 在节点和 express 后端应用程序中以相反的顺序向我展示对象

Question

我正在使用 mern stack 和 redux 构建一个待办事项列表网络应用程序。我创建了一个简单的表单来输入数据，但是在将 post 数据发送到后端时我遇到了困难。我的表单文本字段区域名称是 'task'（例如），我传递的值是 'jonas'。前端的一切工作正常，但在后端，当我在 post 方法回调函数中控制 req.body 时，我确实得到 {jonas: ' '} 作为值。为什么会这样？我的意思是它应该是{task: 'jonas'}，对吧？

请有人帮我解决这个问题。最近两天我一直在这个问题上。我本可以分享代码截图，但代码库真的很大。

我应该得到 {task: 'jonas'} 的输出（这始终是任何文本字段输入数据的正确格式。）但我得到的只是 {jonas: ''}。

前端（与 Material-UI 反应）：

import React, { Fragment, useState } from 'react';
import { useDispatch } from 'react-redux';
import { createTasks } from './../../Actions/TaskActions';
import { Container, FormControl, Button } from '@mui/material';

const Form = props => {
  const [task, setTask] = useState();
  const dispatch = useDispatch();

  const submitHandler = event => {
    event.preventDefault();
    console.log(task);
    dispatch(createTasks(task));
    setTask('');
  };

  return (
    <Fragment>
      <Container maxWidth="sm">
        <form onSubmit={submitHandler} method="post">
          <FormControl fullWidth={true}>
            <input
              name="task"
              type="text"
              value={task}
              onChange={event => setTask(event.target.value)}
            />
            <Button variant="contained" style={{ marginTop: 5 }} type="submit">
              Add tasks
            </Button>
          </FormControl>
        </form>
      </Container>
    </Fragment>
  );
};

export default Form;

React-Redux（调度操作）

import * as api from './../API/API';

export const createTasks = task => async dispatch => {
  try {
    console.log(task);
    const response = await api.addTasks(task);
    console.log(response);

    dispatch({ type: 'CREATE', payload: response });
  } catch (err) {
    console.log(err);
  }
};

API（前后端连接）

import axios from 'axios';

const url = 'http://localhost:5000/tasks';

export const addTasks = newTask => axios.post(url, newTask);

app.js（后端）

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

const taskRouter = require('./Routes/taskRouter');

const app = express();

app.use(cors());
app.use(bodyParser.json({ limit: '10000kb', extended: true }));
app.use(bodyParser.urlencoded({ limit: '10000kb', extended: true }));
app.use(bodyParser.json());
app.use(morgan('dev'));
app.use(express.json());
// app.use(express.urlencoded({ extended: true }));

// app.get('/', (req, res) => {
//   res.status(200).send('Hello world!');
// });

app.use('/tasks', taskRouter);

module.exports = app;

server.js（后端）

const dotenv = require('dotenv');
const mongoose = require('mongoose');

dotenv.config({ path: `${__dirname}/config.env` });
const app = require('./app');

const DB = process.env.DATABASE.replace(
  '<password>',
  process.env.DATABASE_PASSWORD
);

mongoose
  .connect(DB, {
    useNewUrlParser: true,
  })
  .then(() => console.log('Connected to database...'))
  .catch(err => console.log(err));

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

app.listen(port, () => {
  console.log(`Server is running on the port ${port}...`);
});

路由器（后端）

const express = require('express');
const taskController = require('./../Controllers/taskController');

const taskRouter = express.Router();

taskRouter
  .route('/')
  .get(taskController.getTasks)
  .post(taskController.createTask);

taskRouter
  .route('/:id')
  .patch(taskController.updateTask)
  .delete(taskController.deleteTask);

module.exports = taskRouter;

控制器（后端）

const taskModel = require('./../Model/taskModel');

exports.createTask = async (req, res) => {
  try {
    // const response = req.body.name;
    // console.log(response);
    console.log(req.body);
    const bodyData = req.body;
    // const response = Object.keys(req.body)[0];
    // console.log(typeof response);

    const answer = new taskModel({
      ...bodyData,
      date: new Date().toISOString(),
    });

    console.log(answer);

    await answer.save();

    res.status(200).json(answer);
  } catch (err) {
    res.status(400).send(err);
  }
};

模型（后端）

const mongoose = require('mongoose');

const taskSchema = mongoose.Schema({
  task: {
    type: String,
    required: [true, 'A to-do list must have a task name'],
  },
  date: {
    type: Date,
    default: new Date(),
  },
});

const taskModel = mongoose.model('taskModel', taskSchema);

module.exports = taskModel;

Answer 1

那么，从表单传递到调度程序再到 axios 请求的“任务”只是一个字符串“jonas”，对吗？在某处你需要把它变成一个对象，

const newTask = {
    task: theTaskVariable     // "jonas" in this case
}

如果你说前端按原样工作，你可以在发出 axios 请求之前在 API 连接中进行更改。我可能已经在表单 submitHandler 中进行了更改，然后相应地对前端进行了更改。

req.body 在节点和 express 后端应用程序中以相反的顺序向我展示对象

req.body is showing me object in reverse order in node and express backend app

javascript

node.js

express

reactjs

react-redux