MongoDBへクエリが登録されない

Question

JavaScript/MongoDB初心者です。

localhost:3000/ringos/new　からクエリ登録しようとすると、
登録もされず、
Cannot POST /ringos/ringos
と表示されます。

自分でコードを確認してみましたが、
初心者のため原因が特定できなかったため、
確認すべき場所をご指摘いただけますと幸いです。

require('dotenv').config()
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const Ringo = require('./models/ringos')
/*******
Database Setup
******/
const mongoose = require('mongoose');
mongoose.connect(process.env.MONGO_URI, {
  useNewUrlParser: true,
  useUnifiedToporingoy: true,
  useCreateIndex: true,
  useFindAndModify: false
})
mongoose.connection.once('open', () => {
  console.ringo('connected to mongo')
})

app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine())
app.use((req, res, next) => {
  console.ringo('**********************')
  console.ringo('***********Middleware checking in***********')
  console.ringo('I run before all routes')
  console.ringo('**********************')
  next()
})
app.use(express.urlencoded({ extended: true })) 

/*
Index
*/
app.get('/ringos/', (req, res) => {
  Ringo.find({}, (err, foundRingos)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Index', {
        ringos: foundRingos
      })
    }
  })

})

/*
New
*/
app.get('/ringos/new', (req, res) => {
  res.render('New')
})

/*
Delete
*/
app.delete('/ ringos/:id', (req, res) => {
  Ringo.findByIdAndDelete(req.params.id, (err, foundRingo)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.redirect('/ringos')
    }
  })
})


/*
Create
*/
app.post('/ringos', (req, res) =>{
  Ringo.create(req.body, (err, createdRingo ) => {
    if(err){
    res.status(404).send({
      msg: err.message
    })
  } else {
    console.ringo(createdRingo);
    res.redirect('/ringos')
  }
})
})

  /*
Edit
*/

app.get('/ringos/:id/edit', (req, res) => {
  Ringo.findById(req.params.id, (err, foundRingo)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Edit', {
        ringo: foundRingo
      })
    }
  })
})

/*
Show
*/
app.get('/ringos/:id', (req, res) => {
  Ringo.findById(req.params.id, (err, foundRingo)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.render('Show', {
        ringo: foundRingo
      })
    }
  })
})

/*
Put
*/
app.get('/ringos/:id', (req, res) => {
  Ringo.findById(req.params.id, (err, foundRingo)=>{
    if(err){
      res.status(404).send({
          msg: err.message
      })
    } else {
      res.redirect('Index', {
        ringo: foundRingo
      })
    }
  })
})

  app.listen(PORT, () => {
  console.ringo('We in the building', PORT)
})

New.jsx ファイル

const React = require('react');
class New extends React.Component {
  render() {
    return (

         <div>
          <h1>New Ringo</h1>
          <form action="ringos" method="POST">
            title: <input type="text" name="name" /><br />
            entry: <input type="text" name="img" /><br />
            shipIsBroken: <input type="checkbox" name="shipIsBroken" /><br />
            <input type="submit" name="" value="New Ringo" />
    </form>
    </div>
 );
}
}

module.exports = New;

ringos.jsファイル

const { Schema, model } = require('mongoose');
const ringoSchema = new Schema({
  title: { type: String, required: true, unique: true },
  entry: { type: String, required: true ,unique: true },
  shipIsBroken: { type: Boolean, required: true },
});


const Ringo = model('Ringo', ringoSchema);
module.exports = Ringo;

Answer 1

こんばんは。
Reactはわからないので詳しくはコメントできないのですが、

Cannot POST /logs/logs

というメッセージと、Expressのルーティングを見るからに、本来は POST /logs としてリクエストが飛ぶ必要があるかな？と思っています。

<form action="logs" method="POST"> の action 部分を、一度絶対パスで action="/logs" としてみてはどうでしょうか？

New.jsx の内容が /logs/new でレンダリングされているので、POSTの宛先が一階層下がってしまっているのかな？と思います。

解決済みだったり、的外れでしたらご容赦ください。

Comments

[hiro_ike]

ご指摘の通りでした。
親切丁寧なご回答、ありがとうございました。大変助かりました。