class?CommentArea?extends?React.Component{

????constructor(props)
????{
????????super(props)
????????this.state?=
????????????{
????????????????comments:[]
????????????}

????????this.handleComment=this.handleComment.bind(this)
????????this.onDelete=this.onDelete.bind(this)
????}

????handleComment(value)
????{
????????this.setState({
????????????comments:[...this.state.comments,value]
????????})
????}

????onDelete(deleteIndex)
????{
????????console.log(this.state.comments)

????????console.log(deleteIndex)

????????this.setState({
????????????comments:?this.state.comments.filter((item,index)?=>?{return?index?!=?deleteIndex})
????????})

????????console.log(this.state.comments)
????}

????render()?{
????????const?comments?=?this.state.comments
????????return(
????????????<div>
????????????????<CommentList?comments={comments}?onDelete={this.onDelete}></CommentList>
????????????????<CommentBox2?commentsLength={comments.length}?onHandleComment={this.handleComment?}></CommentBox2>

????????????</div>
????????)
????}

}

export?default?CommentArea

點(diǎn)擊刪除留言時(shí)，界面已經(jīng)刪除相應(yīng)留言，但是對(duì)于state里comments數(shù)組元素的日志輸出始終慢一個(gè)節(jié)拍。

原始效果

1. 點(diǎn)擊刪除2?界面及后日志輸出

   
   

2. 點(diǎn)擊刪除3?界面及后日志輸出