使用不使用AXIOS获取数据的效果 [英] UseEffect not fetching data with axios

问题描述

我想在第一次登录到结果页面时对我的数据库进行查询。我想从数据库中获取一些数据，并通过如下所示的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.pars。

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

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

编辑

检查网络工具时，我看到了这一点。上面的行是一个工作正常的POST请求。第二个问题是我访问不起作用的服务器。即使我得了200分。

推荐答案

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

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

这只是一个例子：

2. 如果您可以正确看到响应，则下一步只需更新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;

这篇关于使用不使用AXIOS获取数据的效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！