javascript - 无法获得 sequelize findbyPk 以向我的 React 应用程序返回单个值

Question

我敢肯定，这里的新手将被证明是一个愚蠢的问题。我试图在没有运气的情况下解决自己。在 Postman 中，返回到“localhost:8000/playlists/1”的数据是正确的，但我无法通过来自我的 REact 应用程序的 API 调用重复此成功:3000。当我 console.log out 数据时，我得到了所有 Playlists 对象，而不是预期的单个播放列表。

下面是我的服务器路由和来自 React 的调用。

React 中的 播放列表组件

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


const SeededPlaylist = () => {
  const [playlist, setPlaylistData] = useState([]);

    useEffect(() => {
        const fetchData = async () => {
            const result = await axios(
            '/:playlistId'
        );
        setPlaylistData(result.data);
    };

    fetchData();
}, []);

console.log(playlist);

  return (
    <div style={{textAlign: 'center'}}>
       {playlist.map(playlist => (
             <div key={playlist.id}>
            {playlist.title}
            </div>

            ))}



    </div>
  );
}
  export default SeededPlaylist

来自 Node 的播放列表路由

import { Router } from 'express';

const router = Router();


router.get('/', async (req, res) => {
  const playlists = await req.context.models.Playlist.findAll({
   include: [{
     model: req.context.models.Song,
     attributes: ['track_name', 'artist_name', 'track_duration'],
     through: { attributes: [] }
   }],
  });

  return res.send(playlists);
});

router.get('/:playlistId', async (req, res) => {
  const playlist = await req.context.models.Playlist.findByPk(req.params.playlistId, {
    include: [{
      model: req.context.models.Song,
      attributes: ['track_name', 'artist_name', 'track_duration'],
      through: { attributes: [], }
    }],
  });

  return res.send(playlist);
});

export default router;

server.js 中的相关路由器

app.use('/playlists', routes.playlist);
app.use('/:playlistId', routes.playlist);
app.use('/songs', routes.song);
app.use('/', routes.spotify);

编辑:我 90% 确定我没有正确获取特定 ID，需要将我的 URL 或特定 ID 保存到我的 axios 请求中。不知道如何做到这一点，但我会继续寻找。

编辑2:
如果其他人最终来到这里，问题正如猜测的那样。我没有正确定位 API 调用中的 URL。我最终使用 useParams 从 URL 本身获取 ID，然后在 get 请求中使用它作为模板文字。

const { id } = useParams();

  //Fetch Playlist data from API with Axios
  useEffect(() => {
      const fetchData = async () => {
        const songUri = [];
        const response = await axios(`http://localhost:8000/playlists/${id}`
        );
        setPlaylistData(response.data);
        setSongs(response.data.songs);
        for (const spotify_uri of Object.keys(response.data)){
          console.log(spotify_uri, response.data[spotify_uri]);
        }
      }
      //Second Array prevents activation on component update
        fetchData();
  }, []);

Answer 1

server.js 中的相关路由器

app.use('/playlists', routes.playlist);
// app.use('/:playlistId', routes.playlist); This is no need, we must remove this line
app.use('/songs', routes.song);
app.use('/', routes.spotify);