use react to write comments (marked how long ago the comment was posted, updated every 5s), but when you delete the first record, the time of the comment is displayed as the time of the deleted record. Only after 5s can the time be displayed normally.
/ / components of comments
import React, {Component} from "react"
import propTypes from" prop-types"
export default class Comment extends Component {
static propTypes={
comment:propTypes.object.isRequired,
click:propTypes.func,
index:propTypes.number
}
constructor(){
super();
this.state={
timeString:"",
}
this.handleDeleteComments = this.handleDeleteComments.bind(this);
//this.handleContent = this.handleContent.bind(this);
}
componentWillMount(){
this.handleUpdate();
//
this._timer=setInterval(
this.handleUpdate.bind(this),
5000);
}
componentWillUnmount(){
clearInterval(this._timer);
}
handleUpdate(){
console.log(this.props.comment.createdTime);
var time = (new Date().getTime()-new Date(this.props.comment.createdTime).getTime())/1000; //
console.log(time);
if(time/60>=1){
this.setState({
timeString: `${Math.floor(time/60)}`
})
}else{
this.setState({
timeString: `${Math.floor(Math.max(time,1))}`
})
}
}
handleDeleteComments(){
this.props.click(this.props.index);
}
handleContent(content){
//xss``
return content.replace(/</g,"<").replace(/>/g,">").replace(/&/g,"&").replace(/"/g,""")
.replace(/"/g,""").replace(/`([\S\s]+?)`/g,"$1")
}
render(){
return(
<li className="comment_user">
<span>{this.props.comment.username}</span>
<label dangerouslySetInnerHTML={{
__html: this.handleContent(this.props.comment.content)
}} />
<a className="delete" onClick={this.handleDeleteComments}></a>
<span className="time">{this.state.timeString}</span>
</li>
)
}}
/ / error screenshot
I guess it is because of component reuse, but the problem of setting different key values has not been solved. Which boss can take a look at it? thank you!