React-Komponente wird nicht neu gerendert, nachdem Requisiten geändert wurden

Question

Ich versuche, eine Gruppe von Objekten in dem Zustand zu filtern, wenn der Benutzer auf eine Schaltfläche auf meiner Komponente klickt. Die Logik der Filterung funktioniert einwandfrei, aber wenn sie zur Komponente zurückkehrt, fehlen die gefilterten Objekte und stattdessen ist die Eigenschaft undefiniert. Fehle ich eine Lebenszyklusmethode?

Das Click-Ereignis:

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

Der Komponentenbehälter:

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

Die Filterung in einer anderen Datei nimmt, die die gefilterten Ereignisse in einem zurück Objekt. Diese Logik hat keine Fehler.

Das Problem: Als es an die folgende Funktion erhält, „Beiträge“ ist nicht definiert. Irgendwo auf dem Weg dorthin kommen die gefilterten Beiträge nicht zurück zur Komponente.

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 - Filterfunktion

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

Sie verlieren this Kontext, wenn Ihre Aktion zu binden.

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

Ändern Sie den Aufruf zu

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

Dies stellt sicher, this in Ihrem filterMyPosts Methode. Ohne es ist Requisiten nicht definiert.

Answer 2

Zustand fehlt Beiträge als eine der Eigenschaft/Reducer. Ereignisse sollten durch Beiträge ersetzt werden.

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

Die Parameter zwischen dem allPostsByFilter-Aufruf und der Funktionsdefinition stimmen nicht überein.

Der erste Parameter sollte der Filter sein. Stattdessen wird Posts als erster Parameter übergeben.

Die Dispatch-Methode - updateFilter sollte den Status des Filters für allPostByFilter ändern, der ausgelöst werden soll.