Как передать данные из реагирующего внешнего интерфейса в экспресс-бэкэнд узла?

Question

Я только что создал приложение, и я хотел иметь возможность отправлять данные из моей функции OnSubmit в экспресс-бэкэнд и сохранять их там.Спасибо!

пожалуйста, не обращайте внимания: похоже, ваш пост в основном кодовый;пожалуйста, добавьте еще некоторые детали.Похоже, ваш пост в основном кодовый;пожалуйста, добавьте еще некоторые детали.Похоже, ваш пост в основном кодовый;пожалуйста, добавьте еще некоторые детали.Похоже, ваш пост в основном кодовый;пожалуйста, добавьте еще некоторые детали.Похоже, ваш пост в основном кодовый;пожалуйста, добавьте еще некоторые детали.Похоже, ваш пост в основном кодовый;пожалуйста, добавьте еще несколько деталей.

Вот мой код сервера:

const express = require('express');
const bodyParser = require('body-parser')
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));

app.get('/home', function (req, res) {
 return res.send('home');
});

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(process.env.PORT || 8080);

, а вот моя функция отправки

import React, { Component } from 'react';
import './App.css';
import PageOne from './Components/PageOne';
import PageTwo from './Components/PageTwo';
import PageThree from './Components/PageThree';
import PageFour from './Components/PageFour';
import PageFive from './Components/PageFive';
import PageSix from './Components/PageSix';
import {Button,  } from 'semantic-ui-react'
import axios from 'axios';


class App extends Component {


  constructor(props){
    super(props)
    this.state={
      generalDetails: "Text",
      fName: "Text",
      mName: "Text",
      LName: "Text",

    }

    this.onContentChange = this.onContentChange.bind(this);
    this.onSubmitForm = this.onSubmitForm.bind(this);
  }




  render() {

    return (

      <div className="App">


      <PageOne handleChange={this.onContentChange}  />
      <PageTwo handleChange={this.onContentChange} />
      <PageThree handleChange={this.onContentChange} />
      <PageFour handleChange={this.onContentChange} />
      <PageFive handleChange={this.onContentChange}/>
      <PageSix handleChange={this.onContentChange} />

      <Button onClick={this.onSubmitForm} >
      Submit Form
      </Button>

    <br/>
    <br/>
      </div>
    );
  }



  onSubmitForm(e){
  e.preventDefault();

  console.log(
    //start of page one
    '* general Details: ' ,this.state.generalDetails,
    '* First Name: ', this.state.fName,
    '* Middle Name: ', this.state.mName,
    '* Last Name: ', this.state.lName,

  );
}
  //end

  onContentChange(fieldname, data){

    console.log('On Content Change', data);

     this.setState({
       [fieldname]: data

    });
  }



}

Answer 1

В этом случае вы можете использовать axios

Пример

saveData = e => {
        e.preventDefault();
        let data = {
              generalDetail: this.state.generalDetails,
              firstName: this.state.firstName,
              middleName: this.state.middleName,
              lastName: this.state.lastName
        };

        axios.post("http://localhost:8080/endpoint", data).then(() => {
           //do something
         }).catch(() => {
            console.log("Something went wrong. Plase try again later");
        });
    }

Измените конечную точку на вашу конечную точку API

Пожалуйста, дайте мне знать, если вам нужна помощь

Answer 2

Выберите один HTTP-клиент, я рекомендую axios для простоты использования.

Ваш код на клиенте реакции должен выглядеть следующим образом:

const respone = axios.post('http://localhost:8080/<your_endpoint>', {
  generalDetail: this.state.generalDetails,
  firstName: this.state.firstName,
  middleName: this.state.middleName,
  lastName: this.state.lastName
})

Затем вы разрешаете ответ и берете данные, это объект обещания.