javascript - 使用axios从本地JSON文件获取数据并显示数据

Question

这是我编写的本地 JSON 文件。

{ "data":[
    {
    "photo": "https://source.unsplash.com/aZjw7xI3QAA/1144x763",
    "caption": "Viñales, Pinar del Río, Cuba",
    "subcaption": "Photo by Simon Matzinger on Unsplash",
    "thumbnail": "https://source.unsplash.com/aZjw7xI3QAA/100x67",
    }, 
    {
    "photo": "https://source.unsplash.com/c77MgFOt7e0/1144x763",
    "caption": "La Habana, Cuba",
    "subcaption": "Photo by Gerardo Sanchez on Unsplash",
    "thumbnail": "https://source.unsplash.com/c77MgFOt7e0/100x67",
    },
    {
    "photo": "https://source.unsplash.com/QdBHnkBdu4g/1144x763",
    "caption": "Woman smoking a tobacco",
    "subcaption": "Photo by Hannah Cauhepe on Unsplash",
    "thumbnail": "https://source.unsplash.com/QdBHnkBdu4g/100x67",
    }
]
}

我不明白为什么解析后无法映射值。我获取了数据并解决了它，当我调用 console.log(response.data) 时，我确实得到了 JSON 对象，但是当我想映射它时，它显示了一个错误，指出 photos.map 不起作用。

import React from 'react'
import { useState, useEffect } from 'react'
import axios from 'axios'

function FetchingData() {
    const [photos, setPhotos] = useState([]);

    useEffect(()=>{
        axios.get('photos.json')
        .then(response => {
            console.log(response)
            setPhotos(response.data)
        })
    })

    return (
        <div>
            <ul>
               {photos.map(photos => (<li>{photos.photo}</li>)
               )}
            </ul>
        </div>
    )
}

export default FetchingData

Answer 1

我相信您缺少数据。 axios 调用的 response 将包含 data 中的有效负载(您的 JSON 文件)，即 response.data。然而，这是一个对象(没有 map 函数)。我相信您正在寻找自己的 data 字段中的数组，因此请尝试:

            setPhotos(response.data.data)