React Redux：可以在浏览器控制台中查看道具，但呈现时返回未定义

Question

我在React中呈现道具值有问题。

我已经将从API获取的数据添加到redux存储，然后将状态映射到我的应用程序组件。当我使用react dev tools查看组件时，数据会显示在我的props中，并且我可以通过控制台访问API prop的值，方法是输入：

$r.props.products.items[0].title

下面是Chrome开发工具的图片，说明了从应用程序组件访问道具的能力，以供参考：

但是当我尝试在应用程序组件中使用

{this.props.products.items[0].title}

组件中断,我在控制台中收到一个错误,该错误说：

未捕获的TypeError：无法读取未定义的属性“title”

如果有帮助的话，我在这里创建了一个gist来显示我的app.js组件，其中状态映射到道具、动作和redux商店的reducer。

如果有人能帮我，那就太好了。我整天都在为这件事发愁。

Answer 1

如果前面的答案不起作用，那么我唯一能想到的就是items可能作为一个空数组存在，形式为this.props.products.items=[]

尝试：

{
  this.props.products.items &&
  this.props.products.items.length > 0 &&
  this.props.products.items[0].title
}

Answer 2

原因是，您正在从api获取数据，直到您没有得到响应为止{this.props.products.item}将未定义，因为render将在您得到响应之前执行。因此，您要么需要使用一些bool保持呈现直到没有得到响应，要么需要进行检查，如下所示：

{this.props.products.items && this.props.products.items[0].title}