如何解决如何使用 Express 和 Axios 将响应对象从我的 get 请求发送到前端?
我正在尝试从 MongoDB 中提取数据以填充我正在构建的这个应用程序中的一些计时器。但是,我似乎无法使用 Axios 将响应发送到前端。这是我在后端的路线:
const express = require('express');
const router = express.Router();
const TimerModel = require('../models/Timer');
router.get('/',async (req,res) => {
try {
const timers = await TimerModel.find({});
console.log('Succesful get req',timers);
res.send(timers);
} catch (err) {
console.log(err.message);
res.status(500).send('Server Error');
}
});
module.exports = router;
我在 try 语句中的 console.log
打印了正确的数据,但我在将其发送到前端时遇到了问题。这是组件:
import React,{ useState,useEffect } from 'react';
import Timer from '../Timer/Timer';
import axios from 'axios';
import './Wrapper.css';
function Wrapper() {
//State effects
useEffect(() => {
axios
.get('/')
.then((res) => {
console.log(res);
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
});
const handleChange = (event) => {
setTitle(event.target.value);
};
const addTimer = () => {
const timer = <Timer title={title} key={timers.length} />;
let allTimers = timers.slice();
allTimers.push(timer);
setTimers(allTimers);
setTitle('');
};
return (
//JSX Code
);
}
export default Wrapper;
axios
调用中,当我运行 console.log(res)
时我得到了这个奇怪的对象,我得到了 index.html
的 res.data
。为什么我无法访问我使用后端请求创建的计时器对象?当我在我的路线中运行命令 res.send(timers)
时,它不是被发送了吗?解决方法
您需要在 axios 请求中添加您的 API url。目前,axios 正在获取您的 React 网站的 url,这就是为什么您的响应具有 React 网站的 index.html 文件的原因。
useEffect(() => {
axios
.get('api_url/')
.then((res) => {
console.log(res);
console.log(res.data);
})
.catch((err) => {
console.log(err);
});
});
,
您可以将结果保存在类似的状态
new_col
[1,2]
[3,6]
[1,3,5]
[2,4,6]
[9]
[8]
然后在你想要的地方使用时间可变
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。