MongoDB不斷回傳比預期值少一個值

我目前正在做一個博客專案，我必須在我的博客網站上啟用“喜歡”功能。我已經啟用了點贊功能，但是，每當我用我的 MongoDB 測驗點贊功能時，我得到的回應總是比預期值小一個。例如，如果我給一個已經有 4 個贊的博客點贊，我會回傳一個僅顯示 4 個贊的檔案，而不是包含新的 5 個贊的更新檔案。

這是我處理“喜歡”功能的前端代碼：

import axios from "axios"
import { useEffect, useState } from "react"
import blogService from '../services/blogs'
const baseUrl = '/api/blogs'

const Blog = ({blog}) => {
  const [checker, setChecker] = useState(false)
  const [blogLikes, setBlogLikes] = useState(0)
  const [updatedBlog, setUpdatedBlog] = useState({})
  const buttonText = checker  ? 'hide' : 'view'

  useEffect(() => {
    setUpdatedBlog({
      user: blog.user?.id,
      likes: blogLikes,
      author: blog.author,
      title: blog.title,
      url: blog.url
    })
  }, [blogLikes])
  
  
  const blogStyle = {
    paddingTop: 10,
    paddingLeft: 2,
    border: 'solid',
    borderWidth: 1,
    marginBottom: 5
  }

  const handleLike = async (e) => {
    e.preventDefault()

    setBlogLikes(blogLikes   1)
    
    const response = await blogService.update(blog?.id, updatedBlog)
    console.log(response)

  }

  return (
    <>
  {buttonText === "view" ?   
  <div style={blogStyle}>
    {blog.title} {blog.author} <button onClick={() => setChecker(!checker)}>{buttonText}</button>
  </div>
  : <div style={blogStyle}>
      {blog.title} {blog.author} <button onClick={() => setChecker(!checker)}>{buttonText}</button>
      <p>{blog.url}</p>
      likes {blogLikes} <button onClick={handleLike}>like</button>
      <p>{blog.user?.username}</p>
    </div>}
  </>
  )
}
export default Blog

這是我處理“新”請求的后端代碼，例如：

blogsRouter.put('/:id', async (request, response) => {
  const body = request.body
  const user = request.user
  console.log(body)

  const blog = {
    user: body.user.id,
    title: body.title,
    author: body.author,
    url: body.url,
    likes: body.likes
  }

  const updatedBlog = await Blog.findByIdAndUpdate(ObjectId(request.params.id), blog, { new: true })
  response.json(updatedBlog)
})

這是將請求放入前端目錄中另一個檔案的特定 axios 處理程式：

const update = async (id, newObject) => {
  const request = await axios.put(`${ baseUrl }/${id}`, newObject)
  return request
}

uj5u.com熱心網友回復：

狀態更新在反應中是異步的，因為當您的 API 呼叫發生時：

const handleLike = async (e) => {
    e.preventDefault()

    setBlogLikes(blogLikes   1)
    
    const response = await blogService.update(blog?.id, updatedBlog)
    console.log(response)

  }

該updatedBlog物件仍然包含舊資料，而不是更新的資料。因此，請嘗試以下操作，將您的handleLike功能更改為：

const handleLike = () => {
    setBlogLikes(blogLikes   1)
}

并將您的 API 呼叫添加到useEffect：

useEffect(() => {
    setUpdatedBlog({
      user: blog.user?.id,
      likes: blogLikes,
      author: blog.author,
      title: blog.title,
      url: blog.url
    });
    blogService.update(blog?.id, {
      user: blog.user?.id,
      likes: blogLikes,
      author: blog.author,
      title: blog.title,
      url: blog.url
    }).then((response) => console.log(response));
  }, [blogLikes]);

標籤：javascript 反应 数据库 mongodb

上一篇：使用REGEX_SUBSTR查找子字串

下一篇：使用按2個id分組的聚合查詢創建結構