如何使用 Express 和 Axios 将 get 请求中的响应对象发送到前端？

Question

我正在尝试从 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;

我的 console.log 在 try 语句中打印了正确的数据，但我在将它发送到前端时遇到了问题。这是组件：

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) 时得到了这个奇怪的对象，并且我得到了 res.data 的 index.html。为什么我无法访问我通过后端请求创建的计时器对象？当我在我的路线中运行命令 res.send(timers) 时，它不是被发送了吗？

Answer 1

您需要在 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);
  });

});

Answer 2

您可以将结果保存为

这样的状态

`````````````
`````````````
const [time, setTimer] = useState(null)
useEffect(() => {
axios.get('/').then(res => setTimer(res.data)
}, [])
`````````````
`````````````

然后在你想要的地方使用可用的时间

如何使用 Express 和 Axios 将 get 请求中的响应对象发送到前端？

How do I send response object from my get request to the front end with Express and Axios?

routes

mongoose

express

mern

axios