0

Написал React приложение, которое при поиске исполнителя через Spotify API выдает все альбомы:

'use strict';

const e = React.createElement;

import logo from './logo.svg';
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Container, InputGroup, FormControl, Button, Row, Card} from 'react-bootstrap';
import { useState, useEffect} from 'react';

class LikeButton extends React.Component {
    constructor(props) {
        super(props);
    }



    render() {
        const [searchInput, setSearchInput] = useState("");
        const [acessToken, setAcessToken] = useState("");
        const [albums, setAlbums] = useState([]);

        const CLIENT_ID = "2c8ed13da29f45b990a1ad43ba870f7d";
        const CLIENT_SECRET = "c18c855bfbe442d6aed8b9df99ae131f";

        useEffect(() => {
            //API Acess Token
            var authParameters ={
                method: 'POST',
                headers:{
                    'Content-Type' : 'application/x-www-form-urlencoded'
                },
                body: 'grant_type=client_credentials&client_id=' + CLIENT_ID + '&client_secret=' + CLIENT_SECRET
            }

            fetch('https://accounts.spotify.com/api/token', authParameters)
                .then(result => result.json())
                .then(data => setAcessToken(data.access_token))
            //token
        }, [])


        //Search
        async function search(){
            console.log("Search for " + searchInput);

            //Get request using search to get the Artist ID
            var searchParametrs = {
                method: 'GET',
                headers:{
                    'Content-Type' : 'application/json',
                    'Authorization' : 'Bearer ' + acessToken
                }
            }

            var artistID = await fetch('https://api.spotify.com/v1/search?q=' + searchInput + '&type=artist', searchParametrs)
                .then(response => response.json())
                .then(data => {return data.artists.items[0].id})
                .then(console.log("The Artist ID is " + artistID));

            //Get request with Artist ID to grab all the albums from the artist
            var returnedAlbums = await fetch('https://api.spotify.com/v1/artists/' + artistID + '/albums' + '?include_groups=album&market=US&limit=50', searchParametrs)
                .then(response => response.json())
                .then(data => {
                    console.log(data);
                    setAlbums(data.items);
                });
            //Dispaly all the albums

        }

        console.log(albums);





        return e(
            <div className="App">
                <Container>
                    <InputGroup className="mb-3" size="lg">
                        <FormControl
                            placeholder="Search for Artist"
                            type="input"
                            onKeyPress={event =>{
                                if(event.key == "Enter"){
                                    console.log("Pressed Enter");
                                    search();
                                }
                            }
                            }
                            onChange={event => setSearchInput(event.target.value)}
                        />

                        <Button onClick={search}>
                            Search
                        </Button>
                    </InputGroup>
                </Container>

                <Container>
                    <Row className="mx-2 row-cols-4">
                        {albums.map((album, i) => {
                            console.log(album);
                            return(
                                <Card>
                                    <Card.Img src={album.images[0].url}/>
                                    <Card.Body>
                                        <Card.Title>{album.name}</Card.Title>
                                    </Card.Body>
                                </Card>
                            )
                        })}
                    </Row>
                </Container>

            </div>
        );
    }
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

Хочу вставить его в свою html форму:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
</head>
<body>

<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
<p>React is loaded as a script tag.</p>

<!-- We will put our React component inside this div. -->
<div id="like_button_container"></div>

<!-- Load React. -->
<!-- Note: when deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<!-- Load our React component. -->
<script src="/js/like_button.js"></script>

</body>
</html>

Програма не отображается. P.S: В реакте разбираюсь только пару дней

1
  • Что это такое return e( ? Замените root.render(e(LikeButton)); на root.render(<LikeButton />);
    – SwaD
    21 ноя 2022 в 18:10

1 ответ 1

0

Проблема была в том, что я разрабатывал приложение в Visual Studio Code. После создания React приложения нужно выполнить npm run build. После билда мы получаем проект с index.html, на котором сразу есть готовое React-приложение :-)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.