[英]React component doesn't rerender after update to state
我有一个表单可以向评论数组this.state.comments提交新评论。
在同一组件中,我要呈现这些新注释。 但是由于某种原因,当我添加新评论时,我的组件不会重新呈现。 我只有在导航到其他页面并返回页面时才能看到它。 因此状态肯定已更新。
以下是我的组件,知道为什么吗?
class SinglePost extends React.Component {
constructor(props) {
super(props)
const id = props.params.id - 1;
this.state = props.messages[id];
this.submitHandler = this.submitHandler.bind(this);
}
submitHandler(event) {
event.preventDefault();
let target = event.target;
let comment = target.comment.value,
user = target.user.value,
timestamp = new Date,
id = this.state.id,
cmtId = this.state.comments.length ? (this.state.comments.length + 1) : 1
this.props.postNewComment({ id, user, comment, cmtId });
}
render() {
const post = this.state;
let hour = post.timestamp.getHours();
hour = hour > 12 ? `${hour - 12}` : hour === 0 ? '12' : `${hour}`;
let minute = post.timestamp.getMinutes();
minute = hour > 12 ? `${minute}pm` : `${minute}am`;
return (
<div>
<Link to='/'><button className="btn btn-secondary">Back to Posts</button></Link>
<h3>{post.title}</h3>
<p>By: {post.user} on {hour}:{minute}</p>
<p>{post.message}</p>
<h4>Responses</h4>
{post.comments.length > 0 && post.comments.map(cmt => <SingleCommentBox cmt = {cmt} key = {cmt.id}/>)}
<div>
<form id="new-comment-form" onSubmit={this.submitHandler}>
<label className="required">Message:</label>
<textarea
className="form-control"
name="comment"
type="text"
required />
<label className="required">User:</label>
<input
className="form-control"
name="user"
type="text"
required />
<button className="btn btn-success" type="submit">Post Reply</button>
</form>
</div>
</div>
)
}
}
const mapStateToProps = state => {
return {
messages: state.messages.messages
}
}
const mapDispatchersToProps = {
postNewComment
}
export default connect(mapStateToProps, mapDispatchersToProps)(SinglePost)
我回购的其余部分。
看起来您正在将状态初始化为来自构造函数中的props,但在props更改时永远不会更新状态,因此状态永远不会更改。 对我来说,就像您根本不需要使用state
。
这样的事情,那么您也不需要构造函数:
class SinglePost extends React.Component {
submitHandler = (event) => {
event.preventDefault();
let target = event.target;
let comment = target.comment.value,
user = target.user.value,
timestamp = new Date(),
id = this.props.params.id - 1;
const comments = this.props.messages[id].comments;
const cmtId = comments.length ? (comments.length + 1) : 1;
this.props.postNewComment({ id, user, comment, cmtId });
}
render() {
const id = props.params.id - 1;
const post = this.props.messages[id];
let hour = post.timestamp.getHours();
我同意奥斯丁的观点,您不需要在这里使用状态。 您在此处的输入不受控制(您未在处理来自父组件的输入的状态更改)。
但是,如果要这样做,正确的方法是使用componentWillReceiveProps
。
componentWillReceiveProps(nextProps) {
const id = nextProps.params.id - 1;
this.setState(() => ({post: nextProps.messages[id]});
}
另一个建议。 实际上,您可以通过访问ownProps并传递ID来从mapStateToProps函数中传递“ post”。 一个例子:
const mapStateToProps = (state, ownProps) => {
return {
post: state.messages[ownProps.id - 1)
}
}
这里的主要优点是您无需将整个message数组传递给每个组件,如果在单个页面上有很多这些组件,则可能会降低性能。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.