Redux mapStatmentToProps返回undefined

Question

所有人。

已經有幾天的問題，我似乎無法解決。 在我的Redux應用程序中，我將有三個不同的組件PostComponentPostDetailsPosts在PostComponent正在構建一個帖子（構建單個帖子的UI）。這個UI的一部分，我需要有一個「評論數量」（評論：2等）我的減速器是建立在每個主要職位的關鍵下返回評論的分組對象的方式。

我的終極版商店的這種狀態然後是內PostComponentmapStateToProps但是我目前在路線/其comments返回它，當我在詳細查看/:category/:postId我ownProps.postId正在恢復undefined

接收 undefined

真的很感激，如果有人有任何想法爲什麼發生這種情況！

回購：https://github.com/petterostergren/readable_udacity

---

評論減速器state = {}

case COMMENTS_GET_COMMENTS: 
     return { 
     ...state, 
     comments: _.groupBy(action.payload, 'parentId'), 
     } 

帖子（/）

class Posts extends Component { 
    componentDidMount() { 
    const { getPosts } = this.props 
    getPosts() 
    } 

    renderPosts() { 
    const { posts } = this.props 
    return _.map(posts, post => { 
     return (
     <div> 
      <PostComponent 
      key={post.id} 
      postId={post.id} 
      title={post.title} 
      body={false} 
      readirect 
      author={post.author} 
      voteScore={post.voteScore} 
      category={post.category} 
      timestamp={post.timestamp} 
      /> 
     </div> 
    ) 
    }) 
    } 

    render() { 
    return <div>{this.renderPosts()}</div> 
    } 
} 

export default connect(
    state => ({ 
    posts: _.filter(state.posts, ['deleted', false]), 
    }), 
    { 
    getPosts, 
    } 
)(Posts) 

PostDetailes（/:category/:postID）

class PostDetails extends Component { 
    componentDidMount() { 
    const { getPosts, getComments, match } = this.props 
    getPost(match.params.postId) 
    getComments(match.params.postId) 
    } 

    renderComments() { 
    const { comments, posts, match } = this.props 
    return _.map(comments, comment => { 
     return (
     <PostComponent 
      key={comment.id} 
      postId={comment.id} 
      isPost={false} 
      title="" 
      body={comment.body} 
      readirect={false} 
      author={comment.author} 
      voteScore={comment.voteScore} 
      category="" 
      timestamp={comment.timestamp} 
     /> 
    ) 
    }) 
    } 

    renderPosts() { 
    const { posts } = this.props 
    return (
     <PostComponent 
     key={posts.id} 
     postId={posts.id} 
     title={posts.title} 
     body={posts.body} 
     readirect={false} 
     author={posts.author} 
     voteScore={posts.voteScore} 
     category={posts.category} 
     timestamp={posts.timestamp} 
     /> 
    ) 
    } 

    render() { 
    return (
     <div> 
     {this.renderPosts()} <hr /> {this.renderComments()} 
     </div> 
    ) 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    console.log("PostDetails, mapStateToProps ownProps ") 
    console.log(ownProps) 
    return { 
    comments: state.comments[ownProps.match.params.postId], 
    posts: _.filter(state.posts, ['deleted', false]), 
    } 
} 

export default connect(mapStateToProps, { getPost, getComments })(PostDetails) 

PostComponent（在一個被注入）

class PostComponent extends Component { 
    componentWillMount() { 
    const { postId } = this.props 
    getComments(postId) 
    } 

    renderNumberOfCommets(postId) { 
    const { comments } = this.props 
    return _.map(comments, comment => { 
     { 
     JSON.stringify(comments) 
     } 
    }) 
    } 

    renderPost() { 
    const { 
     postId, 
     title, 
     voteScore, 
     author, 
     category, 
     timestamp, 
     body, 
     readirect, 
     pushVotePost, 
     comments, 
    } = this.props 
    const time = timeConverter(timestamp) 
    console.log('comments') 
    console.log(comments) 
    return (
     <div key={postId}> 
     <div className=""> 
      <ul className=""> 
      <li> 
       <p> 
       <span 
        className="fa fa-angle-up voteArrow" 
        onClick={() => pushVotePost('upVote', postId)} 
       /> 
       </p> 
      </li> 
      <li className="votes">{voteScore}</li> 
      <li> 
       <span 
       className="fa fa-angle-down voteArrow" 
       onClick={() => pushVotePost('downVote', postId)} 
       /> 
      </li> 
      </ul> 
     </div> 
     <div className=""> 
      <Link to={`${category}`}> 
      <span className="">{category}</span> 
      </Link> 
      {readirect ? (
      <Link to={`${category}/${postId}`}> 
       <h3 className="">{title}</h3> 
       <p>{body ? `${body}` : ''}</p> 
       <p>Comments: {comments}</p> 
       <footer className=""> 
       Writte by {author}, {time} 
       </footer> 
      </Link> 
     ) : (
      <div> 
       <h3 className="">{title}</h3> 
       <p>{body ? `${body}` : ''}</p> 
       <footer className=""> 
       Writte by {author}, {time} 
       {/* TODO: Comments should go here in a numbered format. */} 
       <p>Comments: {this.renderNumberOfCommets(postId)}</p> 
       </footer> 
      </div> 
     )} 
     </div> 
     </div> 
    ) 
    } 

    render() { 
    return <div>{this.renderPost()}</div> 
    } 
} 

PostComponent.propTypes = { 
    id: PropTypes.string, 
    voteScore: PropTypes.number, 
    title: PropTypes.string, 
    author: PropTypes.string, 
    category: PropTypes.string, 
    timestamp: PropTypes.number, 
} 

const mapStateToProps = (state, ownProps) => { 
    console.log('PostComponent, mapStateToProps ownProps') 
    console.log(ownProps) 
    return { 
    comments: state.comments.comments, 
    } 
} 

export default connect(mapStateToProps, { pushVotePost, getComments })(
    PostComponent 
) 

Answer 1

大家好我最終改變了一些東西來得到它的工作

內置UT斯達康我減速如下：

import { COMMENTS_GET_COMMENTS } from '../actions/actionConstants' 

const comments = (state = {}, action) => { 
    switch (action.type) { 
    case COMMENTS_GET_COMMENTS: 
     return { 
     ...state, 
     [action.meta]: action.payload, 
     } 
    default: 
     return state 
    } 
} 

export default comments 

然後在我的組件內調用它爲

const mapStateToProps = (state, ownProps) => { 
    return { 
    comments: state.comments[ownProps.postId] 
     ? state.comments[ownProps.postId] 
     : [], 
    } 
} 

這給我的可能性，那麼我的UI