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

我在react中呈现道具值时遇到问题

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

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

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

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

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

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

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

如果有帮助的话，我已经创建了一个要点，显示我的App.js组件，其中状态映射到redux商店的道具、动作和还原器

---

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

原因是，您正在从api获取数据，直到您没有得到响应为止。

{this.props.products.item}

将是未定义的，因为

渲染

将在您得到响应之前执行。因此，您需要使用一些bool来保持渲染，直到您没有得到响应或进行检查，如下所示：

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

---

原因是，您正在从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=[]

尝试：

---

尝试使用

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

但没有运气。尝试使用

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

但没有运气。