gpt4 book ai didi

javascript - 尝试使用 axios 从 Reactjs 组件发送数据到 Express 应用程序

转载 作者:行者123 更新时间:2023-11-28 03:03:28 26 4
gpt4 key购买 nike

我正在开发一个项目,该项目使用 ReactJS typescript 作为前端,express 作为后端,MongoDB 作为数据库。我遇到的主要问题是我想以某种方式将数据从 React 组件发送到 Express 应用程序,以便它可以查询并向数据库添加内容。目前,我在 http://localhost:9000 上运行 Express 服务器,在 http://localhost:3000 上运行 React 应用程序,我可以使用路由连接它们。

我的 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://Adminname:fjfeinjd@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 组件就是这个,减去 import 语句。渲染函数仅包含一个按钮,该按钮具有执行 doThing()

的 onlclick

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;

我希望能够访问和使用从我的 react 组件发送的数据,以便将来可以使用用户输入查询我的数据库。 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;

该消息可以通过状态显示在浏览器中我的 react 应用程序上。

如果有人可以帮助我看看我做错了什么,或者给我一些可以尝试的其他选项的线索,请告诉我。

谢谢。

最佳答案

当你从客户端发送post请求时,它将在req对象的body属性中

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
});

关于javascript - 尝试使用 axios 从 Reactjs 组件发送数据到 Express 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60794662/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com