Comment publier des données de React to Express

Je n'utilise pas d'exprimer certains donc les détails peuvent ne pas s'appliquer.

En substance, vous devrez envoyer une requête réseau à votre serveur. Comment faire cela dépend de vous, les moyens les plus courants sont avec axios (une bibliothèque) ou avec vanilla js avec l'api fetch.

J'utiliserais simplement l'api fetch. il prend deux paramètres une url et les options. donc il devrait être appelé comme ceci fetch (url, options)

donc dans votre cas ce serait fetch ('localhost: 3001 / create, options)

Que devrait être dans le options. Je vous suggère simplement de regarder la documentation fecth MDN ici https: // développeur .mozilla.org / en-US / docs / Web / API / Fetch_API

mais dans votre cas, vous devrez passer un objet avec la propriété de méthode définie sur post et le nouveau livre que vous voulez à la propriété data définie sur un objet sérialisé JSON du livre que vous souhaitez créer.

par exemple

app.post('/create', function (req, res) {
    var newBook = JSON.parse(req.body.data)
    books.push(newBook)
    console.log(books);
})

Lors de la transmission des livres, une chaîne au lieu d'un objet, vous devrez probablement prendre cette chaîne et l'analyser comme un objet sur le serveur afin que vous exprimiez / créez le gestionnaire ressemble plus à:

let book ={
    BookId:1,
    Title: "coolBook",
    Author: "Me"
}

fetch("localhost:3001/create",
{
     method: "post",
     data: JSON.stringify(book)
}

Du côté de la réaction, vous avez besoin pour créer un gestionnaire d'événements qui appelle la fonction d'extraction ci-dessus. Je vous recommande de regarder un didacticiel react / express car je peux; t vraiment couvrir tout ce qui est requis ici dans une question de débordement de pile telle que: l'utilisation et la validation de formulaires dans react, la gestion des erreurs, async / await et ainsi de suite. P >

Tout le meilleur! j'espère que cela a été légèrement utile

Vous devriez avoir une sorte de réponse sur votre point de terminaison / create
Par exemple:

app.post('/create', function (req, res) {
    var newBook = {
        "BookID": req.body.BookID,
        "Title": req.body.Title,
        "Author": req.body.Author
    }
    books.push(newBook)
    console.log(books);

   res.status(201).json({"some":"response"})


})

Il y a eu quelques erreurs. Voici un code mis à jour et une description de ce qui se passait:

React App.js:

const express = require('express');
const logger = require('morgan');
const cors = require('cors');

const app = express();

//use cors to allow cross origin resource sharing
app.use(
  cors({
    origin: 'http://localhost:3000',
    credentials: true,
  })
);

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

let books = [];

app.get('/home', function(req, res) {
  console.log('Inside Home Login');
  res.writeHead(200, {
    'Content-Type': 'application/json',
  });
  console.log('Books : ', JSON.stringify(books));
  res.end(JSON.stringify(books));
});

app.post('/create', function(req, res) {
  const newBook = {
    BookID: req.body.bookID,
    Title: req.body.bookTitle,
    Author: req.body.bookAuthor,
  };

  books.push(newBook);
  console.log(books);
});

//start your server on port 3001
app.listen(3001, () => {
  console.log('Server Listening on port 3001');
});

1. Vous rencontriez des erreurs en utilisant class et non className . class est un mot réservé dans react.js et ne doit pas être utilisé.
2. Vous utilisiez la méthode de publication par défaut que je ne recommanderais pas. J'ai divisé l'article en sa propre action et j'ai utilisé la bibliothèque commune axios pour faire l'appel de publication CORS. J'ai également créé une fonction pour gérer le changement d'entrée à chaque pression de touche avec react.js.
3. J'ai ajouté un état à votre composant. Ceci est courant lorsqu'il y a des entrées de formulaire pour les stocker dans état . J'ai également changé le nom de vos variables en cas de titre, ce qui est la manière courante d'écrire des variables de code.

Node.js index.js:

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

class Create extends Component {
  constructor(props) {
    super(props);

    this.state = {
      bookID: '',
      bookTitle: '',
      bookAuthor: '',
    };
  }

  handleInputChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    });
  };

  handleSubmit = e => {
    e.preventDefault();

    const { bookID, bookTitle, bookAuthor } = this.state;

    const book = {
      bookID,
      bookTitle,
      bookAuthor,
    };

    axios
      .post('http://localhost:3001/create', book)
      .then(() => console.log('Book Created'))
      .catch(err => {
        console.error(err);
      });
  };

  render() {
    return (
      <div>
        <br />
        <div className="container">
          <form onSubmit={this.handleSubmit}>
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookID"
                placeholder="Book ID"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookTitle"
                placeholder="Book Title"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }} className="form-group">
              <input
                type="text"
                className="form-control"
                name="bookAuthor"
                placeholder="Book Author"
                onChange={this.handleInputChange}
              />
            </div>
            <br />
            <div style={{ width: '30%' }}>
              <button className="btn btn-success" type="submit">
                Create
              </button>
            </div>
          </form>
        </div>
      </div>
    );
  }
}

export default Create;

1. Vous n'étiez pas en train d'analyser le corps de la demande, donc elle revenait comme indéfini. J'ai ajouté app.use (express.json ()); et app.use (express.urlencoded ({extended: false})); qui devrait régler la plupart des problèmes.
2. J'ai mis à jour les variables req.body pour qu'elles correspondent à celles provenant de Réagissez.
3. J'ai ajouté le module morgen que vous voyez ici app.use (logger ('dev')); cela est utile en affichant toutes vos requêtes et statuts pour dev fins. Dans ce cas, cela montrait que vous obteniez un 500 (erreur de serveur interne) car express ne pouvait pas lire bookID de undefined (car le corps n'était pas analysé ).

Cela devrait fonctionner maintenant, faites-moi savoir si vous avez des problèmes.