Не удается передать информацию API с помощью React и Axios - PullRequest
Новая
       8

Не удается передать информацию API с помощью React и Axios

0 голосов
/ 07 мая 2020

Привет, прекрасные люди, я весь день изо всех сил пытался передать запрос API в браузер в виде воспроизводимого звука. Я использую API библиотеки изображений и видео НАСА, и я могу в консоли регистрировать массив результатов, которые я получаю из обоих моих запросов, однако я не могу заставить браузер отображать информацию ... 

    import React from "react";
import NavBar from "./NavBar";
import axios from "axios";


export default function AudioPage() {
    const [audios, setAudios] = React.useState([]);
    let audioStuff = [];


    React.useEffect(() => {
        let ignore = false;


        const nasa = async function () {
            await axios.get("https://images-api.nasa.gov/search", { params: { q:'""', media_type:"audio"}})
            .then(res => {
                console.log(res);
                res.data.collection.items.map(async (data, index) => {
                    let audioInfo = {
                        key: index,
                        name: data.data[0].nasa_id,
                        link: ""
                    };
                    await axios.get(data.href)
                    .then(secondRes => audioInfo.link = secondRes.data[0]);
                    audioStuff.push(audioInfo);
                });
                console.log(audioStuff);
                if (!ignore) {
                    setAudios(audioStuff);
                }
            });
        };
        nasa();
        ignore = true;
        console.log(audios);
    });


    return (
        <div className="video-page">
            <NavBar />
            <main>
            {audios.map(audio => (<button onClick={audio.link.play()}>{audio.name}</button>))}
            </main>
        </div>
    );
}
...