2 votes

Impossible de poster des données dans mlab en React

J'ai un simple div avec du contenu éditable et je récupère ce que l'utilisateur a tapé dans ce div avec un événement onclick. Je veux envoyer ces données à ma base de données dans Mlab, j'héberge mon application sur Heroku. Actuellement, lorsque j'essaie d'envoyer les données, j'obtiens une erreur 404 et après quelques secondes, j'obtiens GET http://localhost:3000/static/js/0.chunk.js net::ERR_CONNECTION_REFUSED et je ne sais pas pourquoi, puisque je suis capable de récupérer les données déjà existantes via une requête get. Qu'est-ce que je fais de mal ici et comment puis-je faire en sorte que cette requête post réussisse ? Voici mon composant :

import React, { Component } from 'react';
import axios from 'axios';

class CommentBox extends Component {

    constructor(props) {
        super(props);
      }

      state = {
        userComments: []
      }

      componentDidMount() {
        const fetchPosts = async () => {
            const res = await axios.get('https://backend-express.herokuapp.com/userComments');
            this.setState({...this.state, userComments: res.data})
          };
          fetchPosts();
        }

          getCommentData = () => {
            const commentContent = document.querySelector(".comment-box-container__div-comment-box").textContent;
            axios.post('https://backend-express.herokuapp.com/userComments', { commentContent })
           }

    render() {

        return(
            <div className="comment-box-container">
             <div className="comment-box-container__div">
             <button className="comment-box-container__post-comment-btn" onClick={this.getCommentData}> Post Comment</button>
             <div className="comment-box-container__div-comment-box" contentEditable="true"></div>
             </div>

             <div className="comment-box-container__show-coments-section">
             {this.state.userComments.map(comment => 
             <section>
            <h3>{comment.date}</h3>
            {comment.title}
            </section>
            )}
             </div>
             </div>
        )
    }
}

export default CommentBox;

et mon server.js :

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const PORT = process.env.PORT || 3001;
const itemRoutes = express.Router();

app.use(cors());
app.use(bodyParser.json());

mongoose.connect("mongodb://admin:user@password/fghfghfhf", { useNewUrlParser: true } )

const connection = mongoose.connection;

connection.once('open', function() {
  console.log('Connection to MongoDB established succesfully!');
});

// Serve static assets
if(process.env.NODE_ENV === 'production') {
  app.use(express.static('build'));
}

itemRoutes.route('/').get( async (req, res) => {
  let collection = connection.collection("posts");
  let response = await collection.find({})
  .toArray();
  res.send(response);
});

itemRoutes.route('/userComments').get( async (req, res) => {
  let collection = connection.collection("user_comments");
  let response = await collection.find({})
  .toArray();
  res.send(response);
});

app.use('/', itemRoutes);
app.use('/userComments', itemRoutes);

app.listen(PORT, function() {
  console.log('Server is running on' + ' ' + PORT);
})

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X