Question

在网站上发表评论部分，我遇到了一个大问题。目前，我有一个删除按钮，可根据评论的索引从状态中拼接评论。我需要向用户显示相反的数组-因此，当他们发表多个评论时，最新的评论就在最前面。

问题是，如果我对映射的数组进行了reverse（），则索引不会与之相反，因此单击项目1的删除将删除最后一个项目，反之亦然。

const [userComments, setUserComments] = useState([])

const postComment = (event, userComment) => {
  if (event.key === 'Enter') {
    setUserComments(prevState => ([...prevState, {comment: userComment}]))
  }
}

const deleteComment = (e, i) => {
  const userCommentsArray = [...userComments]
  userCommentsArray.splice(i, 1)
  setUserComments(prevState => ([...prevState], userCommentsArray))
}

return (
  <input 
  placeholder="Add a public comment" 
  onKeyUp={event => postComment(event, event.currentTarget.value)}
  onClick={event => showCommentButtons()}
  />
  { userComments 
    ? userComments.map((item, i) => (
      <div className="button" onClick={e => deleteComment(e, i)}>Button</div>
      <p className="comment">{item.comment}</p>
    ))
    : null
  }
)

Answer 1

对数组使用反向方法：

const deleteComment = (e, i) => {
  const userCommentsArray = [...userComments].reverse()
  userCommentsArray.splice(i, 1)
  setUserComments(prevState => ([...prevState], userCommentsArray.reverse()))
}

Answer 2

弄清楚了。使用unshift可以将项目推向相反的状态。

不需要其他更改。

  const postComment = (userComment) => {
    const userCommentNotBlank = !userComment.trim().length < 1
    if (userCommentNotBlank) {
      const newState = [...userComments]
      newState.unshift(userComment)
      setUserComments(prevState => ([...prevState], newState))
      resetAddComment()
    }
  }

反向渲染状态时删除状态中的对象

2 个答案: