时间戳

首页 > 解决方案 > 无法读取对象的属性

reactjs - 无法读取对象的属性

问题描述

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

console.log(props.article)有效，但console.log(props.article.title)或任何其他属性无效（我得到Cannot read property 'id' of undefined）。为什么 ？

我的Article.js组件：

从“反应”导入反应；

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);

标签： reactjsreact-routerreact-redux

解决方案

答案深入探讨了道具的不可用性以及它们内部的相应集合。

您应该首先检查道具的可用性。您可以将 ES6 解构运算符用作：

const { article } = this.props;

这与

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

此外，在渲染内部内容时，您可以使用相同的逻辑来处理articleas 内部的内容可用性：

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

备用短路逻辑：

在渲染内容的同时，你也可以这样写：

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

我希望这将有所帮助。

干杯!

推荐阅读