小道具変更後にリアクションコンポーネントが再レンダリングされない

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)) 
}) 

フィルタリングでフィルタリングイベントを返す別のファイルに行われますオブジェクト。そのロジックにはエラーはありません。

問題：それは次の関数になる頃には、「記事は」未定義です。その途中で、フィルタリングされたポストはコンポーネントに戻ることはありません。

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> 
    ); 
    } 

EDIT - フィルタ機能

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> 

にこれはあなたのfilterMyPosts方法でthisを保証します。それがなければ、小道具は未定義です。

Answer 2

州は、プロパティ/レデューサーの1つとして投稿を紛失しています。イベントは投稿に置き換えてください。

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

allPostsByFilter呼び出しと関数定義の間のパラメータに不一致があります。

最初のパラメータはフィルタである必要があります。代わりに、最初のパラメータとして投稿が渡されます。

ディスパッチメソッド - updateFilterは、allPostByFilterがトリガされるようにフィルタの状態を変更する必要があります。