React Redux：可以在浏览器控制台中查看道具，但在渲染时返回undefined

Question

我在回应中渲染道具值时遇到问题。

我已将从API获取的数据添加到redux存储，然后将状态映射到我的App组件。当我使用react dev工具查看组件时，数据显示在我的道具中，我可以通过键入以下命令来访问API prop的值：

C:\users\jbloggs...\pip.exe install keras

以下是Chrome开发工具的图片，说明了从App组件访问道具的功能，以供参考：

但是当我尝试使用

在App组件中渲染道具时

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

组件中断，我在控制台中收到错误 话说：

  

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

如果有帮助，我已经创建了一个gist here，显示我的App.js组件，其中状态映射到redux商店的props，actions和redurs。

如果有人能帮助我那会很棒。我整天都把头发拉过来。

Answer 1

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

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

Answer 2

如果上一个答案不起作用，我唯一想到的是项目可能以this.props.products.items = []

的形式作为空数组存在。

尝试：

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