TypeError：无法读取未定义的属性“rocket_name”——即使它已定义

Question

我正在使用SpaceX API 来构建个人项目。我正在使用 React Router 来动态加载组件，而不是刷新整个网站。

这是我试图输出一些数据的LaunchDetails 组件：

import React, { Component } from 'react'

class LaunchDetail extends Component {
  state = {
    launch: []
  }

  async componentDidMount () {
    try {
      const res = await fetch(`https://api.spacexdata.com/v3/launches/${this.props.match.params.flight_number}`)
      const data = await res.json()
      this.setState({
        launch: data,
        rocket: data.rocket
      })
    } catch (e) {
      console.log(e)
    }
  }

  render () {
    const { launch, rocket } = this.state

    console.log(rocket)

    return (
      <div>
        <div>
          <h1>{launch.mission_name}</h1>
          <p>SpaceX Flight Number: {launch.flight_number}</p>
          <p>Launched: {launch.launch_year}</p>
          <p>Rocket: {rocket.rocket_name}, {rocket.rocket_type}</p>
        </div>
      </div>
    )
  }
}

export default LaunchDetail

像launch.mission_name 这样深一层的数据正在正确显示...但是，当我尝试向下一层，比如rocket.rocket_name (eg: launch.rocket.rocket_name) 时，它会引发上述错误。

奇怪的是，这在另一个组件中有效，但它使用了不同的端点（所有数据），我正在通过它进行映射。不知道我在这个组件中调用数据的方式是否应该归咎于......

有人知道为什么会发生这种情况吗？

编辑：收到一些 cmets 后，我已将代码更新为更简单，但错误仍然存​​在：

import React, { Component } from 'react'

class LaunchDetail extends Component {
  state = {
    launch: []
  }

  async componentDidMount () {
    try {
      const res = await fetch(`https://api.spacexdata.com/v3/launches/${this.props.match.params.flight_number}`)
      const data = await res.json()
      this.setState({
        launch: data
      })
    } catch (e) {
      console.log(e)
    }
  }

  render () {
    const { launch } = this.state

    return (
      <div>
        <div>
          <h1>{launch.mission_name}</h1>
          <p>SpaceX Flight Number: {launch.flight_number}</p>
          <p>Launched: {launch.launch_year}</p>
          <p>Rocket: {launch.rocket.rocket_name}, {launch.rocket_type}</p>
        </div>
      </div>
    )
  }
}

export default LaunchDetail

Answer 1

从here 你可以发现 react 生命周期方法的顺序如下。

componentWillMount --> 渲染 --> componentDidMount

你已经用

初始化了状态

state = {
  launch: []
}

所以在第一次渲染时，state.rocket 将是未定义的。

要解决此问题，请初始化 state.rocket 或将 componentDidMount 更改为 componentWillMount 前者是首选。

注意 componentWillMount 在版本 17 中已弃用。

---

在 OP 的编辑之后。您仍在将启动初始化为 []

在第一次渲染时，launch.rocket 将是未定义的。因此launch.rocket.rocket_name 会抛出错误。

要么初始化 launch 以拥有 rocket 字段。或者做类似的事情

(launch.rocket || {}).rocket_name，或在访问 rocket_name 之前检查 rocket 是否已定义的其他内容。