MongoDB 不断返回比预期值少 1 的值

Question

我目前正在做一个博客项目，我必须在我的博客网站上启用“喜欢”功能。我启用了点赞功能，但是，每当我使用 MongoDB 测试点赞功能时，我得到的响应总是比预期值小 1。例如，如果我给一个已经有 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

这是我处理“新”的 put 请求的后端代码，例如：

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
}

Answer 1

状态更新在反应中是异步的，因为当您的 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)
}

并在 useEffect 中添加您的 API 呼叫：

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]);

MongoDB 不断返回比预期值少 1 的值

MongoDB keeps returning one less value than intended value

javascript

database

mongodb

reactjs