UseEffect 不使用 axios 获取数据

Question

当我第一次登陆结果页面时，我想查询我的数据库。我想从数据库中获取一些数据，并通过这样的 axios 在前端提供一个 id。

import { useEffect } from "react";
import axios from "axios";

const Results = ({ linkURL, surveyId }) => {

    const linkToShare = linkURL;

    useEffect(() => {
        axios.get(`/get-questions/${surveyId}`);
    }, []);

    return (
        <>
            <h1>Results page</h1>
        </>
    );
};

export default Results;

在后端我没有收到任何请求，并且在页面上刷新时它没有显示任何内容。至少我应该能够看到 req.params。

app.get("/get-questions/:survey", (req, res) => {
    console.log("Route working", req.params);
});

我认为这不是参数的问题，而是 useEffect 的问题，因为我无法在这条路线上与服务器建立任何连接。尝试了几条没有参数的路线，什么也没有。看不到控制台上记录的任何内容。 Axios 在其他路线上运行良好。知道这里出了什么问题吗？

编辑

检查我看到的网络工具。上面的行是一个可以正常工作的发布请求。第二个是我到达不工作的服务器。即使我得到 200。

Answer 1

查看您提供的所有调试信息后，我可以告诉您请求已正确执行。下一步是：

1. 尝试在回复中发送一些内容：然后，始终使用Network，当您点击Preview 时，您应该会看到回复的正文。

这只是一个例子：

1. 如果您可以正常看到响应，下一步就是更新 UI：

import { useEffect, useState } from "react";
import axios from "axios";

const Results = ({ linkURL, surveyId }) => {

    const linkToShare = linkURL;
    const [question,setQuestion] = useState('');

    useEffect(() => {
        axios.get(`/get-questions/${surveyId}`)
.then(res=>setQuestion(res.data.question)); //instead of .question use your JSON structure
    }, []);

    return (
        <>
            <h1>{`Question ${surveyId}:`}</h1>
            <p>{question}</p>
        </>
    );
};

export default Results;

Answer 2

你创建了一个 axios 实例？

如果没有，你可以这样做：

import axios from 'axios'

export const api = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json',
  },
})

像这样导入和使用：

import React, { useEffect } from "react";
import { api } from 'instace directory';

const Results = ({ linkURL, surveyId }) => {

    const linkToShare = linkURL;

    useEffect(() => {
        api.get(`/get-questions/${surveyId}`);
    }, []);

    return (
        <>
            <h1>Results page</h1>
        </>
    );
};

export default Results;