为什么更新存储后组件不更改（React-Redux）

Question

我有一个component ，更新store后不会更改数据

 class RenderComments extends Component { commentsParse() { return this.props.comments.map((comment) => { if (comment.hasComments === true) { return ( <div key={comment.id}> <CommentItem data={comment} /> </div> ) // return } }); // this.props.comments.map() } // commentParse render() { return ( <div> { this.commentsParse() } </div> ) // return } // render } // RenderComments function mapStateToProps(state) { return { comments: state } } export default connect(mapStateToProps)(RenderComments); 

dispatcher

 class AddComment extends Component { constructor(props) { super(props); this.state = { comment: '' } } addNewComment() { this.props.addNewComment(this.state); } render() { return ( <form> <div className="comment-entry"> <div className="form-group"> <textarea onChange={event => this.setState({comment: event.target.value})} > </textarea> </div> <div className="comment-entry-footer"> <button onClick={() => this.addNewComment()} > Submit </button> </div> </div> </form> ) // return } // render } // AddComment function mapStateToProps(state) { return { comment: state } } function mapDispatchToProps(dispatch) { return bindActionCreators({addNewComment}, dispatch); } export default connect(mapStateToProps, mapDispatchToProps)(AddComment); 

这是我的reducer

 import { ADD_COMMENT } from './../constants'; let allUserComments = [/* Array with 4 objects */] const createNewComment = (action) => { let d = new Date(); let n = d.toLocaleTimeString(); let newComment = { id: Math.random(), rating: 0, name: 'MyNick', thumbnail: 'icon.50x50.png', time: n, comment: action.text.comment, replyTo: null, replyToUser: null, hasComments: false } allUserComments.push(newComment); return allUserComments; } export default (state = allUserComments, action) => { switch (action.type) { case ADD_COMMENT: allUserComments = createNewComment(action); return allUserComments; default: return state; } } 

在第一个启动应用程序中，我的component显示4个对象，即返回reducer state ，但是在action之后， component没有重新渲染，而是继续显示4个对象，而不是5。为什么component不更新？

Answer 1

您的减速器在几个层面上都是非常错误的。 它没有遵循不变地更新数据的要求。

首先，您不应该在reducer函数之外维护单独的allUserComments数组。

其次，您不应该使用.push()对数组进行突变-您应该使用.concat()返回还包含添加项的新数组。

第三，您还将在化简器中生成新的ID值。

这些都没有遵循“纯函数”和reducer中不变更新的原则。 由于您直接改变状态并保留相同的数组引用，因此几乎可以肯定会阻止组件正确更新。

请参阅Redux常见问题解答（FAQ）条目，了解有关阻止组件渲染的更多信息，以及结构化Reducers-不可变更新模式部分。