尝试使用 MERN 堆栈问题在 res.json 中传递数组

如何解决尝试使用 MERN 堆栈问题在 res.json 中传递数组

我需要使用 MERN 堆栈进行两个单独的模型调用。在 res.json 中发送一个对象有效但数组给我带来了麻烦。无法提取数据。

控制台日志

{data: "[]",status: 200,statusText: "OK",headers: {…},config: {…}, …}

后端

router.get("/mySharedBooks",async (req,res) => { //when /mySharedBooks is requested this will be run
try{
    const token = req.header("x-auth-token"); //grab token
    if(!token) return res.json(false); //if no token,don't accept
    const verified = jwt.verify(token,process.env.JWT_SECRET);
    if(!verified) return res.json(false); //if not a real token,don't accept
    const user = await User.findById(verified.id);
    if(!user) return res.json(false); //if token doesn't match a user,don't accept
    data = jwt.decode(token,process.env.JWT_SECRET); // verify & decode
    const myBooks = await SharedBook.find({receiverID:data.id}).exec(); //grabs all sharedBooks for the currently logged in user by receiverID
    //res.json(JSON.stringify(myBooks)) //sends back all sharedBooks records  
    let bookIDsArray = [];//blank array    
    for (const index in myBooks){
        const books = await Book.find({bookID:myBooks[index].bookID}).exec(); //grab the book by the bookID we got from previous call
        bookIDsArray.push(books); //add to array
    }
    res.json(JSON.stringify(bookIDsArray))   
}catch(err){
    res.status(500).json({error: err.message});
} //end try,catch
}); // end router.get("/mySharedBooks" //This route grabs the list of 
 books that have been shared with the currently logged in user (by receiverID)

前端

useEffect(() => {//when component renders run this
  if (userData.userData.token) {
    //console.log(userData.userData.token);
    Axios.get("http://localhost:5001/sharedBooks/mySharedBooks",{//this is an axios get requires route and headers,Axios post require route,null,headers in that order
      headers: {
        "x-auth-token": userData.userData.token,"Content-Type": "text/json",},}).then((data) => {//after something is returned,store in data
      console.log(data);

失眠反应

 "[[{\"_id\":\"6037eba24aea43281c5b1036\",\"bookID\":\"1\",\"name\":\"Book 1\",\"genreID\":1,\"rating\":2,\"price\":8,\"author\":\"nbm\",\"synopsis\":\"synopsis\",\"bookUrl\":\"https://svgsilh.com/svg_v2/146021.svg\",\"__v\":0}],[{\"_id\":\"6037eba24aea43281c5b1036\",[{\"_id\":\"6037ebe64aea43281c5b1037\",\"bookID\":\"2\",\"name\":\"Book 2\",\"bookUrl\":\"https://pngimg.com/uploads/number2/Number%202%20PNG%20images%20free%20download_PNG14925.png\",[{\"_id\":\"6037ebfa4aea43281c5b1038\",\"bookID\":\"3\",\"name\":\"Book 3\",\"bookUrl\":\"https://blognumbers.files.wordpress.com/2010/09/3.jpg\",\"__v\":0}]]"

后端的工作版本，不发送数组。

 router.get("/getAllBooks",res) => { //when /getAllBooks is requested this will be run
try{
    const token = req.header("x-auth-token"); //grab token
    if(!token) return res.json(false); //if no token,don't accept
    const books = await Book.find({}).exec(); //grabs all book records
    res.json(JSON.stringify(books)) //sends back all book records
}catch(err){
    res.status(500).json({error: err.message});
} //end try,catch
 }); // end router.get("/getAllBooks" //This route sends back all book records

解决方法

      data.data.bookIDsArray.forEach(element => {
        bookNamesArray.push(element[0].name);//access data in parsed data via the index
        bookAuthorsArray.push(element[0].author);//#3
        bookRatingsArray.push(element[0].rating); bookPricesArray.push(element[0].price);
        bookGenresArray.push(element[0].genreID); bookImgsArray.push(element[0].bookUrl);
       // console.log(element[0])
      });