Question

当我到达我的主页时，我的当前状态是一个由我的文章对象组成的对象。

articles:
0: {id:'3',body:'ballon pied ball…football'}
1: {id:'2',body:'Encore du Lorem … article'}
2: {id:'1',body:'Lorem Ipsum Dolo… article'}

它对应于主页上的文章列表;当我点击其中一个时，它应该将我重定向到我可以阅读它的文章的特定页面。（/条/：id）的

所以我尝试创建一个Article组件来呈现它的标题，副标题和正文。但我得到的道具是未定义的＆＃39;作为一个错误：

Article.js组件：

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


const Article = ({match}) => (
<div className="aboutpage-wrapper">
  <div className="container">
    <h1>{match.params.id}</h1>
    {console.log(props)}
{/*    <h2>{props.article.title}</h2>
    <h3>{props.article.subtitle}</h3>
    <p>{props.article.body}</p>*/}
  </div>
</div>
);

const mapStateToProps = state => ({ article: state.articles[1] });
// I try to access articles[1] just to see if it works.

export default connect(mapStateToProps)(Article);

任何想法？

Answer 1

这是因为在您的文章组件中，您构建道具：({ match })，因此您无法访问props。

如果您想直接在文章组件中访问props，那么您应该这样做：

const Article = props => (...);

如果你想继续解构道具，那么列出所有需要的道具字段，如下所示：

const Article = ({ match, article, ...rest }) => (...);

使用MapStateToProps时未定义props

1 个答案: