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

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

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

这只是一个例子：

如果您可以正确看到响应，下一步就是更新 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;

UseEffect 不使用 axios 获取数据

2 个答案: