Извлечение данных из локального файла JSON с использованием ax ios и отображение данных - PullRequest
Новая
       4

Извлечение данных из локального файла JSON с использованием ax ios и отображение данных

0 голосов
/ 11 января 2020

Это локальный 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

Ответы [ 2 ]

2 голосов
/ 11 января 2020

Я полагаю, вам не хватает data. response из вызова ax ios будет содержать полезную нагрузку (ваш файл JSON) в data, то есть response.data. Однако это объект (который не имеет функции map). Я считаю, что вы после массива в своем собственном data поле, поэтому попробуйте: 

            setPhotos(response.data.data)
0 голосов
/ 11 января 2020

Если ваш файл json содержит поле data в виде массива, вам нужно вызвать 

setPhotos(response.data.data);

В противном случае попробуйте использовать JSON.parse() (даже если я знаю ax ios автоматически разобрать json как объект, но вы никогда не узнаете)

...