ownProps 不会传递变量的值来返回答案

【问题标题】：ownProps doesn't pass down the value of variable to returnownProps 不会传递变量的值来返回
【发布时间】：2020-01-31 00:50:21
【问题描述】：

我正在使用 Redux 学习我的 React。我不明白为什么我的 ownProps 变量 'id' 没有传递 MapStateToProps 函数中的值。我能够 console.log 'id' 的值，但是当我使用 find() 方法查看匹配的 post.id 和变量 'id' 值时它无法识别。错误信息是

× TypeError: Cannot read property 'title' of undefined

我以为我做的一切都是正确的，显然事实并非如此。希望任何人都可以帮助我。

这是在我的 App.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)

【问题讨论】：

post.id 是偶然的数字吗？不是字符串？
post.id 是一个数字。
你可能需要做const id = parseInt(ownProps.match.params.post_id)
id本身传值没问题。当我用 console.log(this.props.id) 测试 id 值时，它正确显示了 id 的值，而 post 值的值单独用 console.log(this.props.post) 测试，它显示正确;但是当我使用 find(post=>post.id === id) 时，它不会传递 id 值。
参数 (match.params.post_id) 中的值可能是一个字符串，因为它来自 URL。如果对象的 id (post.id) 是数字，则需要先将参数中的 id 解析为数字。例如，在您的控制台中尝试：123 === '123'

标签： reactjs redux react-redux

【解决方案1】：

你的道具名称错误。

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

另外，如果没有匹配的帖子，最好返回一个空对象，这样可以避免“未定义的标题”错误，如下所示：

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

【讨论】：

【解决方案2】：

除了@technophyle 的建议之外，您还需要解析来自match.params 的ID，因为它来自URL，它是一个字符串。

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

【讨论】：