Question

我正在从我之前完成的MERN堆栈课程中更新项目。它具有“喜欢”和“不喜欢”按钮，它们在MongoDB中更新，然后将更新后的喜欢数目显示在屏幕上。现在，它正在更新数据库，但不会在屏幕上重新呈现更新的信息。

例如，我将在帖子上点击“赞”按钮（应将其从“ 2个赞”变为“ 3个”）。我可以在MongoDB（3）中看到更新的信息，但是它从未在屏幕（2）上添加类似内容。另外，Redux DevTools告诉我它没有自动更新状态（仍然是2）。然后，我点击浏览器上的“刷新”按钮，就可以看到更新的点赞次数（3）。

我在另一个组件中使用了此组件以及这些动作/减少器，它们可以正常工作。由于某种原因，这里的行为有所不同。也许与我传递的道具有关？ UseEffect问题？

我尝试过在console.logging在PostLikeAndDislike组件之前和之后的likes属性（post.likes），并且两次赞的次数相同（也就是说，如果在单击之前为3，则在单击之后为3）。

PostLikeAndDislike组件：

const PostLikeAndDislike = ({
  addLike,
  removeLike,
  deletePost,
  auth,
  post: { _id, text, name, avatar, user, likes, comments, date },
  showActions
}) => (
  <div className="post bg-white p-1 my-1">
    <div>
      {showActions && (
        <Fragment>
          <button
            onClick={e => addLike(_id)}
            type="button"
            className="btn btn-light"
          >
            <i className="fas fa-thumbs-up" />{' '}
            {likes.length > 0 && <span>{likes.length}</span>}
          </button>
          <button
            onClick={e => removeLike(_id)}
            type="button"
            className="btn btn-light"
          >
            <i className="fas fa-thumbs-down" />
          </button>
        </Fragment>
      )}
    </div>
  </div>
)

PostLikeAndDislike.defaultProps = {
  showActions: true
}

const mapStateToProps = state => ({
  auth: state.auth
})

export default connect(
  mapStateToProps,
  { addLike, removeLike, deletePost }
)(PostLikeAndDislike)

组件PostLikeAndDislike被导入到：

const Post = ({ getPost, post: { post, loading }, match }) => {
  useEffect(
    () => {
      getPost(match.params.id)
    },
    [getPost]
  )

  return loading || post === null ? (
    <Spinner />
  ) : (
    <Fragment>
      {console.log('Before', post.likes)}
      <PostLikeAndDislike post={post} showActions={true} />
      <div className="comments">
        {post.comments.map(comment => (
          <CommentItem key={comment._id} comment={comment} postId={post._id} />
        ))}
      </div>
      {console.log('After', post.likes)}
      <CommentForm postId={post._id} />
    </Fragment>
  )
}

const mapStateToProps = state => ({
  post: state.post
})

export default connect(
  mapStateToProps,
  { getPost, addLike, removeLike }
)(Post)

动作：

// Get post
export const getPost = id => async dispatch => {
  try {
    const res = await axios.get(`/api/posts/${id}`)

    dispatch({
      type: GET_POST,
      payload: res.data
    })
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    })
  }
}

// Add like
export const addLike = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/like/${id}`)

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data }
    })
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status }
    })
  }
}

// Remove like
export const removeLike = id => async dispatch => {
  try {
    const res = await axios.put(`/api/posts/unlike/${id}`)

    dispatch({
      type: UPDATE_LIKES,
      payload: { id, likes: res.data }
    })
  } catch (err) {
    dispatch({
      type: POST_ERROR,
      payload: { msg: err.response.statusText, status: err.response.status },
      loading: false
    })
  }
}

减速器：

const initialState = {
  posts: [],
  post: null,
  loading: true,
  error: {}
}
case GET_POST:
  return {
    ...state,
    post: payload,
    loading: false
}
case UPDATE_LIKES:
  return {
    ...state,
    posts: state.posts.map(
      post =>
        post._id === payload.id ? { ...post, likes: payload.likes } : post
   )
}

就像我在上面说过的那样，我希望“喜欢”按钮和“不喜欢”按钮可以更改喜欢的次数并将其立即重新呈现到屏幕上。

谢谢！

反应不更新重用组件的状态吗？

0 个答案: