Komponent reagujący nie jest ponownie renderowany po zmianie podpór

Question

Próbuję filtrować zestaw obiektów w stanie, gdy użytkownik kliknie przycisk na moim komponencie. Logika filtrowania działa dobrze, ale po powrocie do komponentu brakuje filtrowanych obiektów, a właściwość jest niezdefiniowana. Czy brakuje mi metody cyklu życia?

Zdarzenie click:

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

Pojemnik komponent:

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

Filtrowanie odbywa się w innym pliku, który zwraca filtrowane wydarzenia w sposób obiekt. Ta logika nie ma błędów.

Problem: Zanim dojdzie do następujących funkcji: „posty” jest niezdefiniowany. Więc gdzieś po drodze, filtrowane posty nie wracają do komponentu.

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 - filtr funkcja

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

Tracisz this kontekst podczas wiązania swoje działania.

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

Zmiana inwokacja do

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

zapewniającej Ten this w swojej metodzie filterMyPosts. Bez tego rekwizyty nie są zdefiniowane.

Answer 2

Stan brakuje wpisów jako jeden z właściwości/reduktor. wydarzenia należy zastąpić postami.

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

Występuje niedopasowanie parametrów między wywołaniem allPostsByFilter a definicją funkcji.

Pierwszy parametr powinien być filtrem. Zamiast tego posty są przekazywane jako pierwszy parametr.

Metoda wysyłki - updateFilter powinien zmienić stan filtru dla allPostByFilter, który zostanie wyzwolony.