在前端的帖子中更新 likes 数组

Posted 2023-02-16

【中文标题】在前端的帖子中更新 likes 数组

【英文标题】：Update the likes array in a post in the frontend

【发布时间】：2020-12-11 02:18:22

【问题描述】：

我在后端有一个 PUT 路由来点赞帖子，它将用户 ID 添加到帖子中的点赞数组中。这在 Postman 上测试时工作正常（通过在正文中提供帖子）并且 likes 数组已更新。但是，当在前端单击图标时，我希望更新 likes 数组，但我不确定如何更新帖子的状态。 result 在前端显示带有 200 状态代码的响应，但这是我所得到的。

如何在前端更新 likes 数组？

Post.js

const Post = (props) => 
  const [post, setPost] = useState();
  const [error, setError] = useState(false);
  const id = props.match.params.id;

  const loadSinglePost = (id) => 
    read(id).then((data) => 
      if (error) 
        console.log(data.error);
        setError(data.error);
       else 
        setPost(data);
        console.log(data);
      
    );
  ;

  useEffect(() => 
    loadSinglePost(id);
  , [props]);

  const like = (id) => 
    const user:  _id , token = isAuthenticated();
    fetch(`$API/like/$_id`, 
      method: "PUT",
      headers: 
        "Content-Type": "application/json",
        Authorization: `Bearer $token`,
      ,
      body: JSON.stringify(
        id: id,
      ),
    )
      .then(result =>  console.log(result))
      .catch((err) => 
        console.log(err);
      );
  ;
  return (
    <div>
      <Navbar />
      <div>
        <h3>post && post.title</h3>
          <p>
            post && post.author ? post.author.name : ""
          </p>
        <p>post && post.body</p>
        <h5>post && post.likes && post.likes.length likes</h5>
        <img
          onClick=() => 
            like(id);
          
          
        />
      </div>
    </div>
  );
;

export default Post;

控制器/post.js

exports.like = (req, res) => 
  Post.findByIdAndUpdate(req.body._id, 
    $push: likes: req.profile._id
  , new: true).exec((err, result) => 
    if (err) 
      return res.status(422).json(error: err)
     else 
      return res.json(result)
    
  )


exports.readById = (req, res) => 
  const id = req.params.id
  Post.findById(id)
    .then(post => res.json(post))
    .catch(err => res.status(400).json('Error: ' + err));

【问题讨论】：

添加帖子结构以便更好地理解

【参考方案1】：

您可以像这样在帖子中更新喜欢的然后回调：

const like = (id) => 
    const user:  _id , token = isAuthenticated();
    fetch(`$API/like/$_id`, 
        method: "PUT",
        headers: 
            "Content-Type": "application/json",
            Authorization: `Bearer $token`,
        ,
        body: JSON.stringify(
            id: id,
        ),
    )
    .then(result => 
         // here update post likes 
         let updatedPost = ...post; //to make copy of post 
         updatedPost.likes = [...updatedPost.likes, id]; //add new id to updatedPost' likes array
         setPost(updatedPost); //update post
         console.log(result)
    )
    .catch((err) => 
        console.log(err);
    );
; 

同样从前端发送正文中的 id 键：

body: JSON.stringify(
          id: id,  // here
      )

在后端你期待 _id

Post.findByIdAndUpdate(req.body._id,  // here
    $push: likes: req.profile._id

【讨论】：

感谢您的回答，这有效，但是它不会更新数据库中的 likes 数组。 @AbhaySehgal

@Rahni 从前端，您在正文中发送 id 密钥，但在后端您期待 body._id

非常感谢，它成功了。我将 id 更改为 req.params.id 并将 :id 放在 url 中。 @AbhaySehgal