Question

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

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

我的Article.js组件：

导入来自＆＃39;反应＆＃39 ;;

的反应

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

Answer 1

答案深入探讨了道具的不可用性，以及它们内部的各自收藏。

您应首先检查您的道具的可用性。您可以将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>

我希望这会有所帮助。

干杯！

无法读取对象的属性

1 个答案:

备用短路逻辑：