POST：REACT APP 上的 400 错误请求 - 使用 Express

Question

Im learning React and I'm new to express as well so i would really appreciate the help! So I'm currently stuck on my POST Request and I'm getting a Status 400 = I have been able to store my data in a JSON object and get the correct information to display on my client side. However, I am trying to make a POST request to update the title and description and add my new Video to a list on the front end. Here's my code

REACT COMPONENT/AXIOS REQUEST

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>
    )

    }
}

export default Upload;

Server SIDE CODE:

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;

my object lives in a file called videoId.json here is a snippet of it:

    [
{
    "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

I think i was thinking too hard about it and I simplified my code a bit - now i just gotta figure out the next step and too pass my values so that they appear once I Post the request

  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!"
      })
  }

  })