axios.get()不在客戶端獲取資料

我一直在嘗試為我的社交媒體應用程式實作一個 LIKE 系統，在客戶端做出反應并在服務器端表達。我正在嘗試使用“useEffect”中的“axios”獲取當前的 LIKE 統計資訊。但是，“GET”請求后回傳的資料是一個空陣列而不是實際資料。資料正在保存到 mongoDB，可以使用“POSTMAN”獲取，但不能從客戶端獲取。任何修復？

喜歡.jsx

// Client-side where LIKE stats are fetched

import axios from 'axios';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { Context } from '../../context/Context';
import './reactions.css'

export default function Reactions() {

    const LIKE = "LIKE"
    
    const { user } = useContext(Context)
    const location = useLocation()
    const postId = location.pathname.split("/")[2]

    const [likes, setLikes] = useState(0)
    const [refresh, setRefresh] = useState(false)

    useEffect(() => {
        const fetchReactions = async () => {
            
            const likeRes = await axios.get(`/reactions/all`, {
                data: {
                    postId, 
                    reactionType: LIKE
                }
            })
            
            console.log("Like res data", likeRes.data) // The logged array is empty :(
            setLikes(likeRes.data.length)
        }
        fetchReactions()
    }, [postId, refresh])

    const handleReact = async (reactionType) => {
        const newReaction = {
            reactionType, 
            username: user.username,
            postId,
        }
        try {
            const res = await axios.post("/reactions", newReaction)
            console.log(res.data) // The logged object has data :)
            setRefresh(!refresh)
        } catch(err) {
            console.log(err)
        }
    }

喜歡.js

// Reaction model at server-side
const mongoose = require("mongoose")

const ReactionSchema = new mongoose.Schema(
    {
        reactionType: {
            type: String,
            required: true,
        },
        username: {
            type: String,
            required: true,
        },
        postId: {
            type: String,
            required: true,
        }
    },
    {
        timestamps: true,
    }
)

module.exports = mongoose.model("Reaction", ReactionSchema)

喜歡.js

// API for creating and fetching LIKES

const router = require("express").Router()
const Reaction = require("../models/Reaction")

// CREATE REACTION
router.post("/", async (req, res) => {
    const newReaction = new Reaction(req.body)
    try {
        const savedReaction = await newReaction.save()
        res.status(200).json(savedReaction)
    } catch(err) {
        res.status(500).json(err)
    }
})

// GET REACTIONS OF A POST
router.get("/all", async (req, res) => {
    try {
        const reactions = await Reaction.find({
            postId: req.body.postId,
            reactionType: req.body.reactionType,
        })
        res.status(200).json(reactions)
    } catch(err) {
        res.status(500).json(err)
    }
})

module.exports = router

uj5u.com熱心網友回復：

感謝@cmgchess 讓我思考我使用請求正文發出“GET”請求的方法。

我將正文引數更改為查詢引數，它確實有效 :)

改變了Like.jsx

// Client-side where LIKE stats are fetched

import axios from 'axios';
import { useContext, useEffect, useState } from 'react';
import { useLocation } from 'react-router';
import { Context } from '../../context/Context';
import './reactions.css'

export default function Reactions() {

    const LIKE = "LIKE"
    
    const { user } = useContext(Context)
    const location = useLocation()
    const postId = location.pathname.split("/")[2]

    const [likes, setLikes] = useState(0)
    const [refresh, setRefresh] = useState(false)

    useEffect(() => {
        const fetchReactions = async () => {
            
            // ---- DIFF OPEN ----
            const search = `?postId=${postId}&reactionType=${LIKE}`

            const likeRes = await axios.get(`/reactions${search}`)
            // ---- DIFF CLOSE ----

            console.log("Like res data", likeRes.data) // The logged array has data :)
            setLikes(likeRes.data.length)
        }
        fetchReactions()
    }, [postId, refresh])

    const handleReact = async (reactionType) => {
        const newReaction = {
            reactionType, 
            username: user.username,
            postId,
        }
        try {
            const res = await axios.post("/reactions", newReaction)
            console.log(res.data) // The logged object has data :)
            setRefresh(!refresh)
        } catch(err) {
            console.log(err)
        }
    }

改變了likes.js

// API for creating and fetching LIKES

const router = require("express").Router()
const Reaction = require("../models/Reaction")

// CREATE REACTION
router.post("/", async (req, res) => {
    const newReaction = new Reaction(req.body)
    try {
        const savedReaction = await newReaction.save()
        res.status(200).json(savedReaction)
    } catch(err) {
        res.status(500).json(err)
    }
})

// GET REACTIONS OF A POST
// --- DIFF OPEN ---
router.get("/", async (req, res) => {
    const postId = req.query.postId
    const reactionType = req.query.reactionType
    try {
        const reactions = await Reaction.find({
            postId,
            reactionType
        })
// --- DIFF CLOSE ---
        res.status(200).json(reactions)
    } catch(err) {
        res.status(500).json(err)
    }
})

module.exports = router

標籤：节点.js 反应 表达 公理 得到

上一篇：坐標(lat,lang)的任何地址？

下一篇：關于Qt報錯out of memory allocating 65536問題