將日期從反應日期選擇器發送到后端

Question

我正在嘗試學習如何進行預訂，但我被困在了第一步。 特別是我創建了一個 Redux 操作，它將選擇的日期從前端發送到后端，但它似乎沒有到達數據庫。 這是我的代碼：

Model：

import mongoose from 'mongoose';

var daySchema = new mongoose.Schema({
  date: { type: Date }
});
const Day = mongoose.model('Day', daySchema);
export default Day;

路由器：

import express from 'express';
import expressAsyncHandler from 'express-async-handler';

import Day from '../models/day.js';

const dayRouter = express.Router();


dayRouter.post(
  '/day',
  expressAsyncHandler(async (req, res) => {
    const date = new Day(req.body.date);
    const chosenDay = await date.save();
    if (chosenDay) {
      res.send({
        date: chosenDay
      });
    } else {
      res.status(401).send({ message: 'unable to save to database' });
    }
  })
);


export default dayRouter;

Redux 動作：

import Axios from 'axios';
import { DATE_CREATE_FAIL, DATE_CREATE_REQUEST, DATE_CREATE_SUCCESS } from '../constants/dateConstants';



export const createDate = (date) => async (dispatch) => {
  try {
   
    dispatch({ type: DATE_CREATE_REQUEST });
    const { data } = await Axios.post(
      '/api/day',
      date,
    );
    dispatch({
      type: DATE_CREATE_SUCCESS,
      payload: data,
      success: true,
    });
  } catch (error) {
    dispatch({
      type: DATE_CREATE_FAIL,
      payload:
        error.response && error.response.data.message
          ? error.response.data.message
          : error.message,
    });
  }
};

Redux-reducer：

import { DATE_CREATE_FAIL, DATE_CREATE_REQUEST, DATE_CREATE_SUCCESS } from '../constants/dateConstants';


export const dateCreateReducer = (state = {}, action) => {
    switch (action.type) {
      case DATE_CREATE_REQUEST:
        return { loading: true };
      case DATE_CREATE_SUCCESS:
        return { loading: false, date: action.payload, success: true };
      case DATE_CREATE_FAIL:
        return { loading: false, error: action.payload };
      default:
        return state;
    }
  };

Redux 常量：

export const DATE_CREATE_REQUEST = 'DATE_CREATE_REQUEST';
export const DATE_CREATE_SUCCESS = 'DATE_CREATE_SUCCESS';
export const DATE_CREATE_FAIL = 'DATE_CREATE_FAIL';

服務器：

import http from 'http';
import express from 'express';
import path from 'path';
import mongoose from 'mongoose';
import bodyParser from 'body-parser';
import config from './config.js';
import dayRouter from './routers/dayRouter.js';

const mongodbUrl = config.MONGODB_URL;
mongoose
  .connect(mongodbUrl, {
    useNewUrlParser: true,
    useUnifiedTopology: true,
    useCreateIndex: true,
  })
  .then(() => console.log('db connected.'))
  .catch((error) => console.log(error.reason));

const app = express();

app.use(bodyParser.json());

app.use('/api/day', dayRouter);

const __dirname = path.resolve();
app.use(express.static(path.join(__dirname, '/frontend/build')));
app.get('*', (req, res) => {
  res.sendFile(path.join(`${__dirname}/frontend/build/index.html`));
});
app.use((err, req, res, next) => {
  res.status(500).send({ message: err.message });
});

const httpServer = http.Server(app);

httpServer.listen(config.PORT, () => {
  console.log(`Server started at http://localhost:${config.PORT}`);
});

反應組件：

import React, { useState } from 'react';

import Button from '@material-ui/core/Button';
import { makeStyles } from '@material-ui/core/styles';
import DatePicker from 'react-datepicker';
import setHours from "date-fns/setHours";
import setMinutes from "date-fns/setMinutes";

 import { useDispatch } from 'react-redux'; 
 import { createDate } from '../actions/dateAction';


function DayReservationScreen() {


  const [startDate, setStartDate] = useState(
    setHours(setMinutes(new Date(), 30), 16)
  );
 
  const dispatch = useDispatch();
  const submitHandler = (e) => {
    e.preventDefault();
    dispatch(
      createDate({
        date: startDate
      })
    );
    console.log(startDate)
  };

    
  return (
    <div>
      <form onSubmit={submitHandler}>
        <DatePicker
          selected={startDate}
          onChange={date => setStartDate(date)}
          showTimeSelect
        /* showTimeSelectOnly */
          timeIntervals={15}
          excludeTimes={[
        setHours(setMinutes(new Date(), 0), 17),
        setHours(setMinutes(new Date(), 30), 18),
        setHours(setMinutes(new Date(), 30), 19),
        setHours(setMinutes(new Date(), 30), 17)
      ]}
          dateFormat="MMMM d, yyyy h:mm aa"
        />

        <Button
          variant="contained"
          size="small"
          color="primary"
          style={{
                        width: 80,
                        margin: 5
                      }}
          className={classes.button}
          type='submit'
        >
          Submit
        </Button>

      </form>               
    </div>
  );
}
export default DayReservationScreen;

我究竟做錯了什么？

Answer 1

前端部分工作正常。 但是你有服務器端的問題。

您在/api/day路由中使用dayRouter ，在路由器本身中使用路徑/day 。

因此，端點的完整路徑將是http://localhost:PORT/api/day/day 。

從前端，您向http://localhost:PORT/api/day發送請求

只需編輯您的路由器：

import express from 'express';
import expressAsyncHandler from 'express-async-handler';

import Day from '../models/day.js';

const dayRouter = express.Router();


dayRouter.post(
  '/',
  expressAsyncHandler(async (req, res) => {
    const date = new Day(req.body.date);
    const chosenDay = await date.save();
    if (chosenDay) {
      res.send({
        date: chosenDay
      });
    } else {
      res.status(401).send({ message: 'unable to save to database' });
    }
  })
);


export default dayRouter;