为什么我的 fetch API 会调用映射一个嵌套对象，而不是另一个？

Question

我正在使用 React 解析来自 NASA API 的数据，出于某种原因，我可以在 return 中映射一个嵌套对象，但不能在另一个中映射。

这是我的父组件：

import React, { useState } from 'react'
import './NasaAPI.scss'
import NasaImages from './NasaImages'

const NasaAPI = () => {
    const [nasaData, setNasaData] = useState([])
    const [nasaImage, setNasaImage] = useState("")
    const [searchInput, setSearchInput] = useState("")
    const [loading, setLoading] = useState(true)

    const fetchData = async (e) => {
        const data = await fetch(`https://images-api.nasa.gov/search?q=${searchInput}`)
        .then(response => response.json())
        .then(data => setNasaData(data.collection.items))
        .catch(err => console.log(err))
        .finally(setLoading(false))
    }

    const handleSubmit = (e) => {
        e.preventDefault()
        fetchData()
    }

    const handleChange = (e) => {
        setSearchInput(e.target.value)
    }

    return (
        <div>
            <h2>Search NASA Images</h2>
            <form onSubmit={handleSubmit}>
                <input name="searchValue" type="text" value={searchInput} onChange={handleChange}></input>
                <button value="Submit">Submit</button>
            </form>
            <section>
                <NasaImages nasaData={nasaData} loading={loading}/>
            </section>
        </div>
    )
}

export default NasaAPI

这是子组件中的问题所在：

import React from 'react'

const NasaImages = ({ nasaData }) => {
    console.log(nasaData)

    return (
        <div>
            <h2>This is a where the data go. </h2>
            {
                nasaData && nasaData.map((data, idx) => {
                    return (
                        <div key={idx}>
                            <p>{data.href}</p>
                            <div>
                                {/* {data.links.map((data) => {
                                    return <p>{data.href}</p>
                                })} */}
                                {data.data.map((data) => {
                                    return <p>{data.description}</p>
                                })}
                            </div>
                        </div>
                    )
                })
            }
        </div>
    )
}

export default NasaImages

当前配置有效，将显示 data.description (data.data.map) 映射属性。但是，我希望它上面的注释代码能够显示 data.href (data.links.map) 属性.

JSON 看起来如下：

所以，问题是我可以映射一组属性，data.data.map，但无法访问同一对象中的另一组属性，data.links.map ，没有收到错误“TypeError：无法读取未定义的属性 'map'”。提前致谢！

Answer 1

存在 data 元素但没有 links 属性，换句话说，存在一些未定义的 data.links 属性并且您无法映射那。映射时在 data.links 上使用可选链接运算符，即 data.links?.map。在任何可能未定义的嵌套属性上使用它。

const NasaImages = ({ nasaData = [] }) => {
  return (
    <div>
      <h2>This is a where the data go. </h2>
      {nasaData.map((data, idx) => (
        <div key={idx}>
          <p>{data.href}</p>
          <div>
            {data.links?.map((data, i) => <p key={i}>{data.href}</p>)}
            {data.data?.map((data, i) => <p key={i}>{data.description}</p>)}
          </div>
        </div>
      ))}
    </div>
  )
}

为什么我的 fetch API 会调用映射一个嵌套对象，而不是另一个？

Why will my fetch API call map one nested objects, but not the other?

javascript

api

object

fetch

reactjs