删除注释时更新用户界面。

Question

我有一个带有附加评论的React post组件。

这些评论分布在三个具有这样结构的组件上

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我成功检查注释是否已按需要删除

然后我将函数作为道具传递，并将注释作为状态传递：

<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

您正在改变状态中的细节。

请不要直接更改状态详细信息，否则更改将不会在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)
}

尝试执行此更改。

Answer 2

您可以在不使用setState（）的情况下更改状态：

this.state.comments.splice(indexToDelete, 1)

splice将更改评论的内容。因此状态永远不会由this.setState更改。 render（）将不会被调用。