Javascript 在React中将对象数组用作道具

我正在构建一个使用RESTAPI的小应用程序。我在对象数组中显示信息时遇到问题，请参见下面的代码：

actions.js

从“axios”导入axios
函数fetchService（）{
返回axios.get（'http://localhost:5000/ldbws-休息代理/v0.1/出发板/IPS'）
.然后（功能（响应）{
返回{
服务：响应.数据.列车服务[0]
}
})
.catch（函数（响应）{
console.log（响应）
})
}
导出默认获取服务

列车服务.js

从“../actions”导入fetchService
从“./出发时间”导入出发时间
从“./origin\u站”导入源站
var TrainService=React.createClass({
getInitialState（）{
返回{
服务：[]
}
},
组件安装（）{
fetchService（）
.then（函数（dataObj）{
这是我的国家({
服务：dataObj.service
})
}.绑定（本）
},
渲染（）{
返回(
)
}
})
导出默认列车服务

JSON示例（response.data.trainServices[0]）

{
“目的地”：[
{
“crs”：“CBG”，
“地点名称”：“剑桥”
}
],
“etd”：“准时”，
“操作员”：“大英吉利亚”，
“运算符代码”：“LE”，
“起源”：[
{
“crs”：“IPS”，
“locationName”：“Ipswich”
}
],
“服务ID”：“ILZn7gyLj+eoZZfyaFlP0w==”，
“标准”：“12:20”
}

---

问题是

抛出错误：

TypeError: undefined is not an object (evaluating 'this.state.service.origin')

如果我执行

console.log（dataObj.service.origin[0].crs）

insidecomponentdiddmount，我不确定这为什么不起作用。我认为这与原点数组有关

谢谢你的帮助

编辑：

Chrome Inspector中状态的屏幕截图：

---

这是因为您的

TrainService

render方法调用早于

fetchService

promise解析。 修复错误的最简单方法是等待

fetchService

更新

service

状态：

var TrainService = React.createClass ({
  getInitialState () {
    return {
      service: null
    }
  },
  componentDidMount () {
    fetchService()
      .then(function (dataObj) {
        this.setState({
          service: dataObj.service
        })
      }.bind(this))
  },
  render () {
    if (this.state.service === null)
      return null;
    return (
      <section>
        <DepartureTime time={this.state.service.std} />
        <OriginStation name={this.state.service.origin[0].crs} />
      </section>
    )
  }
})

var TrainService=React.createClass({
getInitialState（）{
返回{
服务：空
}
},
组件安装（）{
fetchService（）
.then（函数（dataObj）{
这是我的国家({
服务：dataObj.service
})
}.绑定（本）
},
渲染（）{
if（this.state.service===null）
返回null；
返回(
)
}
})

fetchService

正在进行异步调用。因此，当运行

componentDidMount

时，它将发出一个异步调用并继续执行

render

当第一次执行

render

函数时，您的state没有填充数据，并且它有一个空数组，用于

this.state.service

，来自

getInitialState

如果您在componentDidMount内编写console.log，请将其安装为

componentDidMount () {
    fetchService()
        .then(function (dataObj) {
             console.log(dataObj.service.origin[0].crs)
             this.setState({
                  service: dataObj.service
             })
        }.bind(this))
},

仅当异步调用成功时，才会执行console.log，因此数据可用

要解决此问题，请在状态数据准备就绪之前不要渲染组件

render() {
    this.state.service.length == 0 && return null
    ...
}

---

您是否在Chrome浏览器中使用类似于“React Developer Tools”（反应开发者工具）的工具检查了实际的

TrainService

状态？谢谢，我没有考虑到这一点。有没有一种方法可以让React帮我处理这个问题，例如使用componentWillMount或类似的东西来等待这样的事情？@lkemitchll我不这么认为，因为您（但不是React core）调用了async方法。这没关系，因为异步请求不会冻结整个应用程序。您可以将一些数据设置为初始状态（componentDidMount），以便在实际加载之前向用户显示一些数据