Reactjs 当每个数据数组不同时，如何映射API数据

我正在尝试通过以下API映射：

然后把数据输入我的州，这样我就可以制作一个谷歌图表了，但我还停留在如何做某一部分上

目前我有这个

state = {
    data: [
             ['name', 'min estimated diameter', 'max estimated diameter'],
    ],
}

然后当页面运行我的CoponentDidMount（）时

这应该从API中获取数据，创建一个名为

minSize

和

maxSize

的对象，然后将其添加到我当前的数据状态下

所有这些目前都很好

问题是我还需要它环绕的行星

因此，这是我在接近数据方面的主要问题：[]

我需要检索轨道物体，但当我从API请求数据时，20个对象中只有大约10个具有包含任何内容的接近数据对象，另一半是空的

所以谷歌图表不会运行，因为我的一半对象都是未定义的

---

那么，我能做些什么来修复或制作它呢？

关闭方法\u数据是一个对象数组。它似乎总是呈现在我面前，以下作品：

axios
  .get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY')
  .then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data.map(
          ({ orbiting_body }) => orbiting_body
        )

        return [
          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches
        ]
      }
    )

    const joined = this.state.data.concat(restructuredData)
    this.setState({ data: joined })
  })

输出为：

[
  [ '454266 (2014 FM7)', 0.4411182, 0.9863702813, [] ],
  [ '(1979 XB)', 0.5064714588, 1.1325046106, [ 'Earth' ] ],
  [ '(1993 BD3)', 0.0152951935, 0.0342010925, [ 'Earth', 'Mars' ] ]
]

但是，如果您仍然发现close_approach_数据有时是未定义的，只需事先检查它，如：

axios
  .get('https://api.nasa.gov/neo/rest/v1/neo/browse?api_key=DEMO_KEY')
  .then((response) => {
    const restructuredData = response.data.near_earth_objects.map(
      ({ name, estimated_diameter, close_approach_data }) => {
        const close_approaches = close_approach_data && close_approach_data.length
          ? close_approach_data.map(({ orbiting_body }) => orbiting_body)
          : [] // If the array doesn't exist, just use an empty array.

        return [
          name,
          estimated_diameter.kilometers.estimated_diameter_min,
          estimated_diameter.kilometers.estimated_diameter_max,
          close_approaches
        ]
      }
    )

    const joined = this.state.data.concat(restructuredData)
    this.setState({ data: joined })
  })

检查

Array.isArray（close\u approach\u data）和&close\u approach\u data.length>0，然后再对其执行任何操作

const restructuredData = response.data.near_earth_objects.map(({ name, estimated_diameter, close_approach_data }) => {

    const isCloseApproachDataValid = Array.isArray(close_approach_data) && close_approach_data.length > 0

    const closeApproachesData = isCloseApproachDataValid? close_approach_data.map(data => {
        // do what you want to do here
    }) : null

    return [
      name,
      estimated_diameter.kilometers.estimated_diameter_min,
      estimated_diameter.kilometers.estimated_diameter_max,
      closeApproachesData
    ]
  }
)

嗨，我应该在哪里进行检查？我在你的代码中没有看到
close\u approach\u data
，你能告诉我你做了什么或者你想做什么吗？@Ivar515我已经更新了我的答案，可能是这样的，但是因为我不知道你想实现什么，所以我将该地图留空。如果
close\u approach\u data
无效，我还假设您将返回
null
。谢谢，我刚刚添加了…close\u approach到返回中，它起了作用。
const restructuredData = response.data.near_earth_objects.map(({ name, estimated_diameter, close_approach_data }) => {

    const isCloseApproachDataValid = Array.isArray(close_approach_data) && close_approach_data.length > 0

    const closeApproachesData = isCloseApproachDataValid? close_approach_data.map(data => {
        // do what you want to do here
    }) : null

    return [
      name,
      estimated_diameter.kilometers.estimated_diameter_min,
      estimated_diameter.kilometers.estimated_diameter_max,
      closeApproachesData
    ]
  }
)