req.body在節點和快速后端應用程式中以相反的順序向我顯示物件

我正在使用帶有 redux 的 mern 堆疊構建一個待辦事項串列 Web 應用程式。我創建了一個簡單的表單來輸入資料，但是在將發布資料發送到后端時我遇到了困難。我的表單文本欄位區域名稱是“任務”（例如），我正在傳遞讓我們說“喬納斯”作為值。前端的一切作業正常，但在后端，當我在 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;

uj5u.com熱心網友回復：

所以，你從表單傳遞給調度員到 axios 請求的“任務”只是一個字串，“jonas”，對嗎？在某處你需要把它變成一個物體，

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

如果您說前端按原樣作業，您可以在發出 axios 請求之前在 API 連接中進行更改。我可能已經對表單 submitHandler 進行了更改，然后也相應地對前端進行了更改。

標籤：javascript 节点.js 反应 表达 反应还原

上一篇：如何使用NodeJS在AWSDynamoDB中進行更新

下一篇：如何使用React/Node.js處理速率受限的API服務？（參考錯誤）