प्रोप बदलने के बाद प्रतिक्रिया घटक पुन: प्रतिपादन नहीं

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

संपादित करें - फिल्टर समारोह

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> 

बदलें अपनी filterMyPosts विधि में

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

यह भरोसा दिलाते हैं this को मंगलाचरण। इसके बिना, प्रोप अनिर्धारित है।

Answer 2

राज्य संपत्ति/reducer में से एक के रूप में पदों गायब है। घटनाओं को पदों द्वारा प्रतिस्थापित किया जाना चाहिए।

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

AllPostsByFilter कॉल और फ़ंक्शन परिभाषा के बीच पैरामीटर में एक मेल नहीं है।

पहला पैरामीटर फ़िल्टर होना चाहिए। इसके बजाय पदों को पहले पैरामीटर के रूप में पारित किया जा रहा है।

प्रेषण विधि - अद्यतन फ़िल्टर को ट्रिगर करने के लिए सभी पोस्टस्टीफ़िल्टर के लिए फ़िल्टर की स्थिति को बदलना चाहिए।