如何在 React JS 中获取 API 并将数据保存到 MongoDB

Question

I try to fetch an API and save the data to MongoDB, but i think i have some problem with my POST method.. I would like to store the data what i fetch from the API and then if i change data in the front i would like if it changed in the database Here is my code snippet:

App.js file

class App extends React.Component {
  state = {
    name: "",
    movie: [],
  };

  componentDidMount = () => {
    this.getMovie();
    this.displayMovie();
  };

  getMovie = () => {
    axios.get("http://api.tvmaze.com/shows?page=1").then((response) => {
      const data = response.data;
      this.setState({
        movie: data,
      });
      console.log("Data has been received");
      console.log(this.state.movie);
    });
  };
  displayMovie = () => {
    axios({
      url: "/",
      method: "POST",
      data: this.state.movie,
    })
      .then(() => {
        console.log("Data has been sent to the server");
        this.getMovie();
      })
      .catch((err) => {
        console.log(err);
        console.log("Internal server error");
      });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.displayMovie}>
          <button type="submit">Send</button>
          <h2>Movie List</h2>
          <div>
            {this.state.movie.map((t) => {
              return <p>{t.name}</p>;
            })}
          </div>
        </form>
      </div>
    );
  }
}

export default App;

server.js file

const express = require("express");
const mongoose = require("mongoose");

const bodyParser = require("body-parser");

const app = express();
const movieRouter = require("./routes/movie.routes");

const connect = () => {
  return mongoose
    .connect("mongodb://localhost:27017/movie", {
      useNewUrlParser: true,
      useUnifiedTopology: true,
    })
    .then(() => console.log("db connected"))
    .catch((err) => console.log(err));
};

connect();

app.use(express.json());
app.use("/", movieRouter);

app.use(bodyParser.json({ limit: "50mb", extended: true }));
app.use(bodyParser.urlencoded({ limit: "50mb", extended: true }));

app.listen(5000, () => {
  console.log("app is running on 5000");
});

model Schema

const mongoose = require("mongoose");

const movieSchema = new mongoose.Schema({
  name: {
    type: String,
  },
});

const MovieSchema = mongoose.model("movieSchema", movieSchema);
module.exports = MovieSchema;

service js file

const MovieSchema = require("../models/movie.models");

const getMovie = async () => {
  const movie = await MovieSchema.find();
  return movie;
};

module.exports = {
  getMovie,
};

controller file

const getMovie = async (req, res, next) => {
  try {
    const movie = await movieService.getMovie();
    res.status(200).json({ result: movie });
  } catch (err) {
    next(err);
  }
};

module.exports = {
  getMovie,
};

router file

const express = require("express");
const router = express.Router();
const movieController = require("../controllers/movie.controllers");

router.get("/", movieController.getMovie);

module.exports = router;

What am i doing wrong? I have POST http://localhost:3000/ 404 (Not Found) error message.

Thank you for help!

Answer 1

In your code, you have only specified a GET route for / . You also need to specify a POST route too.

const express = require("express");
const router = express.Router();
const movieController = require("../controllers/movie.controllers");

router.get("/", movieController.getMovie);
router.post("/", movieController.saveMovie);

module.exports = router;

I put in movieController.saveMovie as a placeholder for whatever gets invoked at this route. That part is up to you. I didn't see a method for it in your code snippets to save it.

Answer 2

First of all your POST route handler is missing (ref: Andrew Nolan). Secondly your react code App.js componentDidMount method is calling getMovie and straight after calling displayMovie. It has to wait till getMovie method returns the results. So i placed promises to solve it.

class App extends React.Component {
  state = {
    name: "",
    movie: [],
  };

  async componentDidMount() {
    try {
      await this.getMovie();
      this.displayMovie();
    } catch (e) {
      console.log(e);
    }
  };

  getMovie = async () => {
    return new Promise((resolve, reject) => {
      axios.get("http://api.tvmaze.com/shows?page=1").then(({ data }) => {
        this.setState({
          movie: data,
        });
        resolve();
      }).catch(e => reject(e));
    });
  };

  displayMovie = async () => {
    axios({
      url: "/",
      method: "POST",
      data: this.state.movie,
    })
    .then(() => this.fetchMovie())
    .catch((err) => console.log(err));
  };

  render() {
    return (
      <div>
        <form onSubmit={this.displayMovie}>
          <button type="submit">Send</button>
          <h2>Movie List</h2>
          <div>
            {this.state.movie.map((t) => {
              return <p>{t.name}</p>;
            })}
          </div>
        </form>
      </div>
    );
  }
}

export default App;

You don't need to send status code 200 . json method will stringify the json object and attach 200 status code as default.

res.status(200).json({ result: movie });   // too long

res.json({ result: movie });   // better practice

res.json({ movie });   // even better

When you are creating mongoose schema, you don't need to explicitly declare type of the data in object literals unless you want to add other configurations.

const movieSchema = new mongoose.Schema({
  name: {
    type: String,
  },
});

const movieSchema = new mongoose.Schema({
  name: String     // better
});

Answer 3

You are also missing post controller just like get, add post controller in controller file too.

const postMovie = async (req, res, next) => {
const {name} = req.body;
  try {

  const newMovie = new Movie({
    name,
  });
   const movie = await newMovie.save();

    res.status(200).json({ result: movie });
  } catch (err) {
    next(err);
  }
};

module.exports = {
  postMovie,
};