Блог

Я пытаюсь использовать возврат с троичным. Но у меня есть ошибка, Unexpected token, expected "," (31:21) указывающая на точку Object.keys , но я не знаю, что это такое. Я хотел бы получить некоторую помощь, чтобы разобраться в этом, пожалуйста.

 import React, { Component } from 'react';
import SpotifyLogin from 'react-spotify-login';
import axios from 'axios';
import '../style.css';
import SelectWidget from './SelectWidget';

class SpotLogin extends Component {
    state = {
        authData: {}
    }
    

    stockInfo = (e) => {
        this.setState({
            authData: e
        });
    }

    getUserInfo() {
        axios('https://api.spotify.com/v1/me', {
            method: 'GET',
            headers: {'Authorization' : 'Bearer '   this.state.authData.access_token}
        })
        .then(data => {
            console.log(data.data);
        })
    }

    render() {
        return( 
            {  Object.keys(this.state.authData).length === 0 ? (
                <div>
                    <SpotifyLogin clientId = MY_ID
                    redirectUri = 'http://localhost:3000/callback'
                    onSuccess={this.stockInfo}
                    buttonText= "Spotify"
                    className= "btn-spotify"
                    />
                </div>
                ) : 
                <div>
                    <SelectWidget />    
                </div> 
            }
        )
    }
}

export default SpotLogin;
  

Вам нужны только фигурные скобки внутри JSX. Технически Object.keys оператор не находится внутри JSX, он просто возвращается напрямую. Поэтому попробуйте удалить фигурные скобки вокруг него:

 render() {
    return(
        Object.keys(this.state.authData).length === 0 ? (
            <div>
                <SpotifyLogin clientId = MY_ID
                redirectUri = 'http://localhost:3000/callback'
                onSuccess={this.stockInfo}
                buttonText= "Spotify"
                className= "btn-spotify"
                />
            </div>
            ) : 
            <div>
                <SelectWidget />    
            </div> 
   )
}