javascript - 删除评论时更新 UI。

Question

我有一个带有附加评论的 react 帖子组件。

评论分布在三个组件上，结构如下

PaginatedComments (contains array of comments as state) --> Comments (which is a higher order component --> SingleComment (which is each individual comment)

现在我已经在我的PaginatedComments中创建了一个处理程序删除该州的评论

deleteCommentHandler = (indexToDelete) =>{
    console.log(this.state.comments)
    this.state.comments.splice(indexToDelete, 1)
    console.log(this.state.comments)
    }

通过console.log，我成功检查评论是否已根据需要删除

然后我将函数作为 prop 传递，并将注释作为状态传递:

<Comments comments={this.state.comments} clicked={this.deleteCommentHandler} />}

在我的高阶组件中，该方法通过

向下传递

高阶分量

  <ul className="comments">
  {this.props.comments.map(comment =>
    <SingleComment key={comment.id} comment={comment} clicked={this.props.deleteCommentHandler} {...this.props}/>
  )}
</ul>

)

然后我为每条评论调用该函数，并使用一个按钮。我还向服务器发出请求，在后端将其删除。

deleteCommentHandler = (id) =>{
  console.log(id);
  this.setState({
    loading: true
  })

  this.commentMapper.deletePostComments(id).then(res =>{ // deletes comment in backend
    this.setState({loading: false})
  });
  let indexToDelete = this.props.comments.findIndex((comment) =>{
    return comment.id === id;
  });
 this.props.clicked(indexToDelete)
 console.log('we are here')

但是，每当我单击按钮时，UI 都不会呈现？

有点奇怪的是，通过控制台登录我的deleteCommenthandler，它最初会注销一个空对象

(来自 Chrome 开发工具)

Answer 1

问题出在这部分代码

deleteCommentHandler = (indexToDelete) =>{
    console.log(this.state.comments)
    this.state.comments.splice(indexToDelete, 1)
    console.log(this.state.commentdirectly

您正在直接更改状态细节。

永远不要直接更改状态详细信息，否则更改不会反射(reflect)在 DOM 中，因为 render 从未被调用。

始终使用 this.setState({..}) 更新您的状态值

您可以在 deleteCommentHandler 中进行类似这样的更改。

注意:仅供引用如何进行更改，代码可能有效也可能无效

deleteCommentHandler = (indexToDelete) =>{
     console.log(this.state.comments)
     var currComments = this.state.comments;
     currComments.splice(indexToDelete, 1);
     this.setState({comments: currComments})
    console.log(this.state.comments)
}

进行此更改后尝试。