开发者问题收集

无法读取对象的属性

2018-05-29
1245

我有一个 Article 组件和一个包含我所有文章的状态。我将状态映射到我想要显示的正确文章的 props。

console.log(props.article) 有效,但 console.log(props.article.title) 或任何其他属性无效(我得到 无法读取未定义的属性“id” )。为什么?

我的 Article.js 组件:

从“react”导入 React;

import { connect } from 'react-redux';


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

const mapStateToProps = (state,props) => ({ article: state.articles.find(function (article) { return article.id === props.match.params.id; })});

export default connect(mapStateToProps)(Article);
1个回答

答案深入探讨了 props 的不可用性,因此也探讨了其中相应的集合。

您应该首先检查 prop 的可用性。您可以使用 ES6 解构运算符:

const { article } = this.props;

const article = this.props.article ? this.props.article : '';
相同

此外,在渲染内部内容时,您可以使用与 article 内部内容可用性相同的逻辑:

<h2>{props.article.title ? props.article.title : '' } </h2>

备用短路逻辑:

在渲染内容时,您还可以这样写:

<h2>{(props.article || {}).title || ''} </h2>

希望这会有所帮助。

干杯!

Vikas Yadav
2018-05-29