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

【问题标题】：Deleting Objects in State While Rendering State in Reverse在反向渲染状态时删除状态中的对象
【发布时间】：2019-12-31 02:44:19
【问题描述】：

为网站创建评论部分，我遇到了一个大问题。目前我有一个删除按钮，可以根据它们的索引从状态中拼接 cmets。我需要将数组反向显示给用户——所以当他们制作多个 cmets 时，最新的一个在上面。

问题是，如果我 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
  }
)

【问题讨论】：

cmets 没有自己的身份吗？如果没有，请先构建comments.map((comment, index) => ({ ...comment, index }))，然后将 that 反向。
你的 cmets 应该有一个 id 与他们每个人相关联，这将帮助你跟踪评论并帮助 React 选择性地更新 DOM。使用数组索引来识别评论是一个非常糟糕的主意。
@AkshitMehra 想这样做，但想不通。有什么方法可以为它们生成随机 id，也可以通过函数从状态中查找和删除？
@RobertC 你可以为这个npmjs.com/package/uuid使用uuid包

标签： javascript reactjs

【解决方案1】：

对数组使用反向方法：

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

【讨论】：

检查 postComment 功能。评论会按正常顺序发送到 state，因此使用此建议会立即反转所有用户 cmets。需要弄清楚如何将 cmets 也推到反向状态。
删除后设置状态之前如何反转它们。

【解决方案2】：

想通了。使用 unshift 以相反的顺序将项目推送到状态。

无需其他更改。

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

【讨论】：