1

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

这是我的父组件：

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'不明确的”。先感谢您！

4

1 回答 1

2

存在一个没有属性的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>
  )
}
于 2021-08-29T23:45:56.400 回答