POST：REACT APP 上的 400 錯誤請求 - 使用 Express

Question

我正在學習 React，而且我也是新手，所以我非常感謝您的幫助！ 所以我目前被困在我的 POST 請求上，並且我收到狀態 400 = 我已經能夠將我的數據存儲在 JSON 對象中並獲得正確的信息以顯示在我的客戶端上。 但是，我正在嘗試發出 POST 請求來更新標題和描述，並將我的新視頻添加到前端的列表中。 這是我的代碼

反應組件/AXIOS 請求

import React from 'react';
import upload from '../../assets/Images/Upload-video-preview.jpg';
import axios from 'axios';
import './Upload.scss';

class Upload extends React.Component {
   state = {
    title: '',
    description: ''
}

handleChange = event => {
    this.setState({title: event.target.value, description: event.target.value});
}

submitHandler = (event) => {
    console.log('FORM', event.target.title.value, event.target.description.value);
    event.preventDefault();
    axios.post('http://localhost:8080/videos/')
    .then(results => {
        console.log(results);
    })
 
}

render() {
    return(
        <section className="upload">
            <h1 className="upload-header">Upload Video </h1>
            <div className="upload-div">   
                <div className="upload-div__inner">
                    <h3 className="upload-div__inner--h3">Video Thumbnail</h3>
                    <img src={upload}  className="upload-div__inner--img"/>
                </div>
            <form className="upload-form" onSubmit={this.submitHandler}>
               <div className="upload-form--div">
                    <label className="upload-form--div-label">TITLE YOUR VIDEO</label>
                        <input type="text" name="title" className="upload-form--div-input" />
                    <label className="upload-form--div-label">ADD A VIDEO DESCRIPTION</label>
                    <input type="text" name="description" className="upload-form--div-input" />
                </div> 
                <button type="submit" className="comment__form--outer-button" >Cancel</button>
                <button type="submit" className="comment__form--outer-button" >Publish</button>
            </form>
            </div>
        </section>
    )

    }
}

導出默認上傳；

服務器端代碼：

const express = require('express');
const app = express();
const router = express.Router();
const { v4: uuidv4 } = require('uuid');
const videoList = require('../data/videoId.json');
const fs = require('fs');

app.use(express.json());

router.get('/', (req, res) => {
    res.status(200).json(videoList);

})
console.log(videoList);
router.get('/:id', (req, res) => {
    const search = videoList.find((video) => video.id == req.params.id);
    if (search) {
      res.status(200).json(search);
    } else {
     res.status(400).json({
      error: 'Video not found'
      });
    }
  });

  router.post('/', (req, res) => {
    console.log(req.params)
    if(req.headers["content-type"] && req.headers["content-type"]==="application/json"){
      if(req.body){
          let newVideo = {
              id: uuidv4(),
              title: req.body.title,
              description: req.body.description
          }

          videoList.push(newVideo)

          fs.writeFile('./videoId.json', JSON.stringify(videoList), (err) => {
              if(!err){
                  res.status(201).send(newVideo)
              } else {
                  res.status(400).send({
                      success: false,
                      message: `Unable to write to videoId.json: ${err}`
                  })
              }
          })
      } else {
          res.status(400).send({
              success: false,
              message: "Data malformed"
          })
      }
  } else {
      res.status(400).send({
          success: false,
          message: "Invalid content type"
      })
  }

  })

module.exports = router;

我的對象存在於一個名為 videoId.json 的文件中，這里是它的一個片段：

    [
{
    "id": "1af0jruup5gu",
    "title": "BMX Rampage: 2018 Highlights",
    "channel": "Red Cow",
    "image": "https://i.imgur.com/l2Xfgpl.jpg",
    "description": "On a gusty day in Southern Utah, a group of 25 daring mountain bikers             lew the doors off what is possible on two wheels, unleashing some of the biggest moments the sport has ever seen. While mother nature only allowed for one full run before the conditions made it impossible to ride, that was all that was needed for event veteran Kyle Strait, who won the event for the second time -- eight years after his first Red Cow Rampage title",
"views": "1,001,023",
"likes": "110,985",
"duration": "4:01",
"video": "https://project-2-api.herokuapp.com/stream",
"timestamp": 1545162149000,
"comments": [
    {
        "name": "Micheal Lyons",
        "comment": "They BLEW the ROOF off at their last show, once everyone started figuring out they were going. This is still simply the greatest opening of acconcert I have EVER witnessed.",
        "id": "1ab6d9f6-da38-456e-9b09-ab0acd9ce818",
        "likes": 0,
        "timestamp": 1545162149000
    },
    {
        "name": "Gary Wong",
        "comment": "Every time I see him shred I feel so motivated to get off my couch and hop on my board. He’s so talented! I wish I can ride like him one day so I can really enjoy myself!",
        "id": "cc6f173d-9e9d-4501-918d-bc11f15a8e14",
        "likes": 0,
        "timestamp": 1544595784046
    },
    {
        "name": "Theodore Duncan",
        "comment": "How can someone be so good!!! You can tell he lives for this and loves to do it every day. Everytime I see him I feel instantly happy! He’s definitely my favorite ever!",
        "id": "993f950f-df99-48e7-bd1e-d95003cc98f1",
        "likes": 0,
        "timestamp": 1542262984046
    }
]

]]

Answer 1

我想我想得太難了，我簡化了我的代碼 - 現在我只需要弄清楚下一步並傳遞我的值，以便在我發布請求后它們就會出現

  router.post('/', (req, res) => {
if(req.body) {
  videoList.push(req.body);
  res.status(201).json({
      success: true
  })
  } else {
     res.status(400).json({
          success: false,
          error: "Please provide a valid title!"
      })
  }

  })