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。没有它，道具是未定义的。

Answer 2

State缺少帖子作为属性/ reducer之一。应该用帖子替换事件。

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

allPostsByFilter调用与函数定义之间的参数不匹配。

第一个参数应该是过滤器。而是将帖子作为第一个参数传递。

调度方法 - updateFilter应该更改要触发的allPostByFilter的过滤器状态。

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

2 个答案: