Попытка отправки данных из Reactjs Component в приложение express с помощью axios - PullRequest
Новая
       24

Попытка отправки данных из Reactjs Component в приложение express с помощью axios

1 голос
/ 22 марта 2020

Я работаю над проектом, который использует ReactJS машинописный текст для внешнего интерфейса, express для внутреннего интерфейса и MongoDB для базы данных. Основная проблема, с которой я столкнулся, заключается в том, что я хочу каким-то образом отправить данные из моего компонента React в приложение express, чтобы оно могло запрашивать и добавлять данные в базу данных. В настоящее время у меня есть сервер express, работающий на http://localhost: 9000 , и приложение React на http://localhost: 3000 , и я могу подключить их по маршрутам.

Мое express приложение выглядит следующим образом: 

var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var cors = require('cors');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var testAPIRouter = require('./routes/testAPI');
var testAddUser = require('./routes/addUser');
const MongoClient = require('mongodb').MongoClient;
const mongoose = require('mongoose');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(cors());
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));


app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use("/testAPI", testAPIRouter);
app.use("/addUser", testAddUser);

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});


const dbRoute = 'mongodb+srv://AdminAlex:Et11tonitrua1dei@pawornaw-b4vzg.gcp.mongodb.net/test?retryWrites=true&w=majority';
mongoose.connect(dbRoute,
    {useNewUrlParser: true})
    .then(() => console.log("Connected to MongoDB"))
    .catch(err => console.error("Could not connected to Mongo"));

module.exports = app;

и мой React Component - это, за исключением операторов импорта. Функция рендеринга содержит только кнопку с onlclick, которая выполняет doThing () 


    constructor(props: any) {
        super(props);
        this.state = {
            showHomePage: true,
            showAnimalUploadSearch: false,
            showProfile: false,
            showAnimal: true,
            apiResponse: "",
            fName: "bob"
        };
        this.changeView = this.changeView.bind(this);
        // this.callAPI = this.callAPI.bind(this);
        // this.componentWillMount = this.componentWillMount.bind(this);
        this.doThing = this.doThing.bind(this);
    }

    callAPI() {
        fetch("http://localhost:9000/testAPI")
            .then(res => res.text())
            .then(res => this.setState({apiResponse: res}))
            .catch(err => err);

    }

    componentWillMount(): void {
        this.callAPI();
    }

    changeView() {
        this.setState({showHomePage: !this.state.showHomePage});
        this.setState({showAnimalUploadSearch: !this.state.showAnimalUploadSearch});
        this.setState({showAnimal: true});
        this.setState({showProfile: false});
    }

    doThing() {

        Axios.post('http://localhost:9000/testAPI', ({firstName: this.state.fName}))
            .then(res => console.log(res));

    }

и, наконец, testAPI. js выглядит следующим образом 

const router = express.Router();
const axios = require('axios');

router.get('/', function(req, res, next) {
//res.send('API is working properly');
    axios.get('http://localhost:3000')
        .then(res => console.log("got it"))
        .catch(err => err);
});

module.exports = router;

Я хочу иметь возможность получать доступ и использовать данные, отправленные из моего компонента реагирования, чтобы в будущем я мог запрашивать в своей базе данных пользовательский ввод. API действительно соединяется с моим кодом React, и когда функция testAPI содержит только следующие строки: 

const router = express.Router();
const axios = require('axios');

router.get('/', function(req, res, next) {
res.send('API is working properly');
});

module.exports = router;

, сообщение может отображаться в моем приложении реакции в браузере через состояние.

Если кто-нибудь может помочь мне понять, что я делаю неправильно, или, возможно, дать мне подсказку, какие еще варианты я могу попробовать, пожалуйста, дайте мне знать.

Спасибо.

1 Ответ

0 голосов
/ 22 марта 2020

Когда вы отправляете почтовый запрос со стороны клиента, он будет находиться в свойстве body объекта req 

const router = express.Router();
 // you shoud listen post request
router.post('/', function(req, res) {
  const { body } = req;
  // do somethin with data which you recieved in body, save to database for example
  // and send response to the client
  res.json({ message: 'your data was saved'});
});

module.exports = router;

для отправки данных клиенту: 

router.get('/', function(req, res) {
  res.json({ data: 'Some data'}); // or res.send('some text') to send plain text
});
...