ownProps не передает значение переменной для возврата

Question

Я изучаю мой React с Redux. Я не понимаю, почему моя переменная ownProps 'id' не передает значение в моей функции MapStateToProps. Я смог установить console.log для значения 'id', однако он не распознает, когда я использую метод find (), чтобы увидеть соответствие значения post.id и переменной 'id'. Сообщение об ошибке:

× TypeError: Невозможно прочитать свойство 'title' из неопределенного

Я думал, что я все делаю правильно, по-видимому, это не так. Надеюсь, кто-нибудь может мне помочь.

Это в моем приложении. js:

import ApiSingle from './components/api/api_post.component';
<Route path='/:post_id' component={ApiSingle} /> 

Это в моем компоненте:

import React from 'react'
import {connect} from 'react-redux'

class ApiSingle extends React.Component{
    render(){
        console.log(this.props)
        console.log(this.props.post)
        const {post, id} = this.props
        return(
            <div>
               <h1>{post.title}</h1>
               {console.log(post)}
               {console.log(id)}
            </div>
        )
    }
}
const mapStateToProps = (state, ownProps) => {
    const id = ownProps.match.params.post_id
    return {
        posts: state.api.posts.find(post => post.id === id),
    }
}
export default connect(mapStateToProps)(ApiSingle)

Answer 1

В дополнение к тому, что предложил @technophyle, вы также захотите проанализировать идентификатор из match.params, потому что, поскольку он идет по URL, это строка.

const id = parseInt(ownProps.match.params.post_id, 10)

Answer 2

Ваши имена неверны.

const mapStateToProps = (state, ownProps) => {
    const id = ownProps.match.params.post_id
    return {
        post: state.api.posts.find(post => post.id === id), // post instead of posts
        id, // <== add id
    }
}

Кроме того, будет хорошей идеей вернуть пустой объект, если нет подходящего поста, чтобы избежать ошибки "title of undefined", например:

post: state.api.posts.find(post => post.id === id) || {},