Javascript 即使缺少道具，如何使我的React子组件渲染

TLDR；我需要能够在React中呈现子组件，即使this.props的属性丢失

我有一个React应用程序。该应用程序使用WP REST API从Wordpress站点获取数据。有时，API中可能缺少图像或其他内容，这会导致客户端中断。下面是一个例子：

我有一个名为Articles.js的文件，它连接到保存我文章的ArticlesStore。然后，我为每一篇文章呈现一个Article.js，并传递如下道具：

{   this.props.articles.map(function(el, index) {                                           
      return <Article key={index} article={el} />
    })
}

{this.props.articles.map（函数（el，索引）{
返回
})
}

这里一切正常，但在我的Article.js中，当我尝试访问未设置的属性时，我得到以下信息：

未捕获的TypeError:无法读取未定义的属性“大小”

这是导致错误的行：

<img src={this.props.article.meta_fields.image.sizes.large} />

当文章中缺少图像时，会发生这种情况。我当然理解javascript错误，但如果API/Store中缺少图像url，我希望呈现Article.js组件事件。我尝试过以下解决方案，但它会导致太多混乱和无法控制：

条件集，如果我们有道具，即。 {this.props.article.meta_fields.image？this.props.article.meta_fields.image.size.large:“imagemissing.png”}

设置默认道具。这不起作用，因为从父级传递到子级的属性会覆盖defaultProps

---

也许我应该试试别的方法，而不是把道具从父母传给孩子？有一个ArticleStore，我可以为每一篇文章设置默认值吗？你会怎么做呢？

如果你想提供一个嵌套的结构作为道具（就像

文章一样），你需要能够依赖结构总是几乎相同的。在这种情况下，有时
meta_字段
没有
图像
-属性（如您的TypeError所示）

在你的情况下，我会考虑从文章对象中取出你实际需要的/使用在<代码>文章>中的组件，并把这些作为道具传递。
<Article title={ article.title } body={ article.body } image={ getImage(article) }/>

function getImage(article) {
    if (article.meta_fields.image
     && article.meta_fields.image.sizes
     && article.meta_fields.image.sizes.large
    ) {
        return article.meta_fields.image.sizes.large;
    }
    return 'default_image.jpg'; // Or whatever you want.
}

假设您的
文章
仅使用
标题
、
正文
、和
图像
。然后把它们当作道具传过去

<Article title={ article.title } body={ article.body } image={ getImage(article) }/>

function getImage(article) {
    if (article.meta_fields.image
     && article.meta_fields.image.sizes
     && article.meta_fields.image.sizes.large
    ) {
        return article.meta_fields.image.sizes.large;
    }
    return 'default_image.jpg'; // Or whatever you want.
}

如果您想提供一个嵌套结构作为道具（就像
文章
），那么您需要能够依赖结构始终几乎相同。在这种情况下，有时
meta_字段
没有
图像
-属性（如您的TypeError所示）

在你的情况下，我会考虑从文章对象中取出你实际需要的/使用在<代码>文章>中的组件，并把这些作为道具传递。
<Article title={ article.title } body={ article.body } image={ getImage(article) }/>

function getImage(article) {
    if (article.meta_fields.image
     && article.meta_fields.image.sizes
     && article.meta_fields.image.sizes.large
    ) {
        return article.meta_fields.image.sizes.large;
    }
    return 'default_image.jpg'; // Or whatever you want.
}

假设您的
文章
仅使用
标题
、
正文
、和
图像
。然后把它们当作道具传过去

<Article title={ article.title } body={ article.body } image={ getImage(article) }/>

function getImage(article) {
    if (article.meta_fields.image
     && article.meta_fields.image.sizes
     && article.meta_fields.image.sizes.large
    ) {
        return article.meta_fields.image.sizes.large;
    }
    return 'default_image.jpg'; // Or whatever you want.
}

你能不能在渲染中设置一个条件，确定道具是否在那里，如果没有，就返回它而不返回图像？我有一个同样的问题，通过提供默认值解决了它，为什么它不提供控制？@cbll然后我必须为我拥有的每个组件设置10个条件。会非常混乱，我将不得不花费大量时间来编写条件语句。@donquixote存储或组件中的默认值？因为我不能使用defaultProps，因为它会在子组件@SebastianMarcussonc中被覆盖。在render中，你是否可以设置一个条件来判断该道具是否存在，如果不存在，则返回时不带图像？我遇到了同样的问题，并通过提供默认值来解决它，为什么它不提供控制？@cbll然后我必须为我拥有的每个组件创建大约10个条件。会非常混乱，我将不得不花费大量时间来编写条件语句。@donquixote存储或组件中的默认值？因为我不能使用defaultProps，因为它在child.in组件@SebastianMarcussonI中被覆盖，这是Lodash解决方案的一部分。它最适合我的需要。我选择了Lodash解决方案。它最适合我的需要。