当我尝试使用axios从mongoDB数据库获取数据时,数据为null

jv2fixgn  于 2023-03-18  发布在  iOS
关注(0)|答案(1)|浏览(148)

我尝试使用axios从mongoDB数据库获取数据,但当我使用console.log()时,我的数据为空,因为下面的数据是代码

import './ListItem.scss'
import ListImg from '../../assest/t3.jpg'
import PlayArrowIcon from '@mui/icons-material/PlayArrow';
import AddIcon from '@mui/icons-material/Add'
import ThumbUpIcon from '@mui/icons-material/ThumbUp';
import ThumbDownIcon from '@mui/icons-material/ThumbDown';
import { useEffect, useState } from 'react';
import axios from '../../axios'

function ListItem({index, item}) {
const [isHovered, setisHovered] = useState(false);
const [movie, setMovie] = useState({});

useEffect(() => {
 const getMovie = async () => {
   try {
     const response = await axios.get('/movies/find/' + item, 
     {
       headers: {
         token: "Bearer //my jwt token"
      },
    });

    setMovie(response.data)
    console.log('listItem data', response)
   } catch (err) {
     console.log(err)
   }
  };
  getMovie()
  }, [item])

  return (
   <div className='listItem' 
   style={{left: isHovered && index * 225 - 50 + index * 2.5}}
   onMouseEnter={() => setisHovered(true)} 
   onMouseLeave={() => setisHovered(false)}
  >
    
  <img src={ListImg} alt="list Images" />

    {isHovered && (
      <>
    
    <video src={movie.trailer} autoPlay={true} loop></video>
      <div className="itemInfo">
        <div className="icons">
          <PlayArrowIcon className='icon'/>
          <AddIcon className='icon'/>
          <ThumbUpIcon className='icon'/>
          <ThumbDownIcon className='icon'/>
        </div>
        <div className="itemInfoTop">
          <span>{movie.duration}</span>
          <span className='limit'>{movie.limit}</span>
          <span>{movie.year}</span>
        </div>
        <div className="desc">
          {movie.desc}
        </div>
        <div className="genre">{movie.genre}</div>
      </div>
    </>
    )}
   </div>
  )
}
export default ListItem

拜托,我错过了什么,我已经尽力了。
1.我的MongoDB数据库中填充了数据
1.我想使用代码中的数据
1.状态文本:“好的”
1.状态为200

vltsax25

vltsax251#

你可以检查“response.data“在你的控制台日志?并检查你的网络选项卡,以确保你的前端得到正确的响应.你可以使用 Postman 或失眠测试你的端点,并检查是否得到响应或没有.

console.log('response data:', response.data);

相关问题