在道具改变后,React组件不会重新渲染

Question

我试图在用户单击组件上的按钮时过滤状态中的一组对象.过滤的逻辑工作正常,但当它返回到组件时,过滤的对象丢失,而属性是未定义的.我错过了生命周期方法吗？

点击事件:

<div onClick={this.filterMyPosts}>My Posts</div>
...
<div>
    {this.renderPosts()}
</div>

filterMyPosts

filterMyPosts() {
   this.props.updateFilter("myPosts");
   // filtering function uses switch statement based on strings to filter posts
}

组件容器:

const mapStateToProps = (state) => {
  return {currentUser: state.session.currentUser,
    posts: allPostsByFilter(state.posts, state.filter, state.session.currentUser.id, state.bookmarks)}
};

const mapDispatchToProps = (dispatch) => ({
  updateFilter: (filter) => dispatch(updateFilter(filter))
})

过滤发生在不同的文件中,该文件返回对象中的过滤事件.那个逻辑没有错误.

问题:当它到达以下函数时,"posts"是未定义的.因此,在过程中的某个地方,过滤后的帖子不会使其返回到组件.

renderPosts() {
    return (
    <div className ="user-profile-posts">
      <ul>
       {Object.keys(this.props.posts).map(id => <PostIndexItem 
        key={`posts-index-item${id}`} 
        post={this.props.posts[id]}
        user={true}
        />)}
      </ul>
    </div>
    );
  }

编辑 - 过滤功能

export const allPostsByFilter = (filter, currentUserId, posts) => {
  switch (filter) {
case "myPosts":

  let postKeys = Object.keys(posts).filter( (id) => {
    return(posts[id].user_id === currentUserId)
  });
  let userPosts = {}
  postKeys.forEach( (key) => userPosts[key] = posts[key])
  let newPosts = {}

  let postKeys = Object.keys(posts).filter( (id) => {
    return (Object.keys(userPosts).includes(id))
  });
  eventKeys.forEach( (key) => newPosts[key] = posts[key])

  return newPosts

default: 
      return posts

Answer 1

this绑定您的操作时您会失去上下文。

<div onClick={this.filterMyPosts}>My Posts</div>

将调用更改为

<div onClick={() => this.filterMyPosts()}>My Posts</div>

这可以保证this您的filterMyPosts方法。没有它， props 是不确定的。