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

【问题标题】：React Redux: Can view props in browser console, but return undefined when renderedReact Redux：可以在浏览器控制台中查看道具，但在渲染时返回 undefined
【发布时间】：2018-10-14 06:58:43
【问题描述】：

我在渲染 props 值时遇到问题。

我已将从 API 获取的数据添加到 redux 存储，然后将状态映射到我的 App 组件。当我使用 react 开发工具查看组件时，数据会显示在我的 props 中，我可以通过控制台通过键入以下内容访问 API prop 的值：

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

这是一张 Chrome 开发工具的图片，展示了从 App 组件访问 props 的能力以供参考：

但是当我尝试使用在 App 组件中渲染道具时

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

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

未捕获的类型错误：无法读取未定义的属性“标题”

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

如果有人可以帮助我，那就太好了。我整天都在拉头发。

【问题讨论】：

标签： javascript reactjs redux react-redux

【解决方案1】：

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

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

【讨论】：

尝试使用{this.props.products.items && this.props.products.items[0].title}，但没有成功。

【解决方案2】：

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

试试：

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

【讨论】：