react请求json数据渲染对应的字段到DOM结构报错!

Question

我模拟了一个商品信息的json数据，点击商品列表传递商品id，进入详情页后通过id请求对应的商品数据。现在我进入详情页可以请求回数据，数据内的其他字段也可以正常渲染到页面上。但是唯独有一个字段对应的值是数组，渲染的时候报错了。这是我请求回的数据。报错的数组我圈出来了：

我是在componentDidMount中fetch异步请求回来的数据:

这里是我在DOM中引用的数据：

这里是我的报错信息：

请问到底哪里错了。。。我在渲染的那个DOM节点
{console.log(this.state.detailGoodData.specification)}
这种方式都能得到这个数组，但是就是访问不到数组里的每个元素

Answer 1

第一次渲染的时候，detailGoodData.specification没有定义吧，这时判断走的后面，所以specification[0]会报错

Answer 2

react的生命周期，render在 didmounted前面，在你获得数据前会开始渲染，但是你这个时候是木有数据的，这个state是个undefined或着你初始化的值，然后这个时候访问这个state的一个属性的值，这个值还是个undefined，所以就炸了。

Answer 3

首先判断写的就有问题，数组是引用类型，this.state.detailGoodData == []这个判断始终都是false，所以三目运算符始终走后面逻辑，其次第一次渲染的时候this.state.detailGoodDat只是个空数组呀，所以自然取不到this.state.detailGoodData.specification

Answer 4

你就直接写

this.state.detailGoodData && this.state.detailGoodData.specification[0].speciPrice

但最好还是循环下 map 判断下。
上面如果是空数组 报错