无法读取对象的属性
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