Tepki bileşeni değiştirildikten sonra yeniden oluşturulmuyor

Question

Kullanıcı, bileşenimdeki bir düğmeyi tıkladığında durumdaki bir nesne kümesini filtrelemeye çalışıyorum. Filtrenin mantığı iyi çalışır, ancak bileşene geri döndüğünde, filtrelenmiş nesneler eksiktir ve bunun yerine özellik tanımsızdır. Bir yaşam döngüsü yöntemini kaçırıyor muyum?

tıklama etkinlik:

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

bileşenli bir kap:

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

filtreleme bir filtre olayları döner, farklı bir dosya, yer alır nesne. Bu mantıkta hata yok.

sorun: aşağıdaki fonksiyonu vardığında, "mesajlar" tanımsız. Bu arada, bir yerlerde, filtrelenmiş yazılar, bileşene geri dönmüyor.

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

DÜZENLEME - Eyleminizi bağlanırken filtre işlevi

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

Sen this bağlamı kaybederler.

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

değiştirin filterMyPosts yönteminde

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

Bu garanti this için çağırma. Onsuz, sahne tanımsızdır.

Answer 2

Durumda, yayınlar mülk/redüktörlerden biri eksik. olaylar gönderilerle değiştirilmelidir.

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

allPostsByFilter çağrısı ve fonksiyon tanımı arasındaki parametrelerinde bir uyumsuzluk var.

İlk parametre filtre olmalıdır. Bunun yerine gönderiler ilk parametre olarak iletiliyor.

Sevkiyat yöntemi - updateFilter, allPostByFilter öğesinin tetiklenmesi için filtrenin durumunu değiştirmelidir.