Блог

Код работает отлично, если ссылка API для получения сведений о треке используется как ‘https://api.spotify.com/v1/tracks/3LgWsmilsrWXiPYQFRD0T7 «.

Но если мы начнем давать динамическую ссылку, например ‘https://api.spotify.com/v1/tracks /’ id используя useParams для получения идентификатора из URL, тогда статус, который я получаю, равен 401 status.

 const Spotify = (props) => {
    
    const Params = useParams();
    const {id} = Params;

    const classes = useStyles();
    
    const spotify = Credentials();
    const [token, setToken] = useState();
    const [image, setImage] = useState();
    const [name, setName] = useState();
    const [artists, setArtists] = useState();

    useEffect(() => {
        
        axios('https://accounts.spotify.com/api/token', {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                'Authorization': 'Basic '   btoa(spotify.ClientId   ':'   spotify.ClientSecret)
            },
            data: 'grant_type=client_credentials',
            method: 'POST'
        })
            .then(tokenResponse => {
                
                console.log(tokenResponse.data)
                const res = tokenResponse.data.access_token;
                setToken(res)                
                console.log(token)
                const url = 'https://api.spotify.com/v1/tracks/' id;
                axios(url,{
                    method: 'GET',
                    headers: { 'Authorization': 'Bearer '   token }
                }).then(dat => {

                    console.log(token)
                    
                    const Name = dat.data.name;
                    setName(Name);
                    const image = dat.data.album.images[0].url;
                    setImage(image);
                    const artist = dat.data.artists;
                    var artiststring = '';
                    artist amp;amp; artist.map((art)=>{
                        const {name,id} = art;
                        artiststring  = name ', '; 
                    })
                    const editedartist = artiststring.slice(0,-2);
                    setArtists(editedartist)
                    console.log(artiststring)
                    console.log(dat.data.artists)
                })
            })


        return () => {
        }
    }, [Params,spotify.ClientSecret,spotify.ClientId])

    return (

        <div className={classes.root}>
            <Grid container spacing={3}>
                <Grid item xs={4}>
                    <img src={image} className={classes.customizeImage} />
                </Grid>
                <Grid item xs={8} className={classes.customizeDetails}>
                    <Grid container>
                        <Grid item xs={12}>{name}</Grid>
                        <Grid item xs={12}>
                            <div style={{fontSize: '13px',color: 'inherit'}}>{artists}</div>                            
                        </Grid>
                    </Grid>
                </Grid>
            </Grid>

        </div>
    )
}

export default Spotify;```
 

Может быть, попробуйте вызвать ваш URL-адрес следующим образом:

 const url = `https://api.spotify.com/v1/tracks/${id}`;
 

также создайте console.log(id) перед вызовом, чтобы гарантировать, что идентификатор доступен.