时间戳

首页 > 解决方案 > 在前端的帖子中更新 likes 数组

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

问题描述

我在后端有一个 PUT 路由来点赞帖子，它将用户 ID 添加到帖子中的 likes 数组中。这在 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);
          }}
          alt="..."
        />
      </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));
}

标签： reactjsmern

解决方案

您可以在然后回调中更新喜欢的帖子，如下所示：

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}
}

推荐阅读