Actualmente estoy codificando mi primera aplicación usando React Native y usando la API de búsqueda de iTunes.

Puse una entrada de texto y un botón que devuelve todos los álbumes correspondientes al texto. Una vez que hace clic en un álbum, toma su ID única y busca los detalles de este álbum.

export function getAlbumDetailFromApi(id)
{
  return fetch('https://itunes.apple.com/lookup?id='+id)
  .then((response) => response.json())
  .catch((error) => console.log(error));
}

Aquí está la clase:


class AlbumDetail extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      album: undefined,
      isLoading: true
    }
  }

  componentDidMount() {
    console.log(this.props.navigation.state.params.idAlbum)
    getAlbumDetailFromApi(this.props.navigation.state.params.idAlbum).then(data => {
      this.setState({
        album: data,
        isLoading: false
      })
    })
  }

  _displayLoading() {
    if (this.state.isLoading) {
      return (
        <View style={styles.loading_container}>
          <ActivityIndicator size='large' />
        </View>
      )
    }
  }

  _displayFilm() {
    const { album } = this.state

    console.log(album.results.artistId)
    console.log()
    if (album != undefined) {
      return (
        <ScrollView style={styles.scrollview_container}>
          <Text style={styles.title_text}>name of the album should go here</Text>     
        </ScrollView>
      )
    }
  }

  render() {
    return (
      <View style={styles.main_container}>
        {this._displayLoading()}
        {this._displayFilm()}
      </View>
    )
  }
}

Si mi ID de álbum es '1474669063', la función devolverá eso:

Respuesta de la API

Pero éste es mi problema. Tal vez es super simple, pero he intentado todo lo que encontré pero no puedo acceder a los datos ...

¿Podría alguien ayudarme, por favor?

2
nicvlas 24 jun. 2020 a las 15:47

2 respuestas

La mejor respuesta

Obteniendo:

  getAlbumDetailFromApi(id) {
    return fetch('https://itunes.apple.com/lookup?id='+id)
      .then(response => response.json())
      .then(data => {
        // set the state here, we access the first object of the results array with data.results[0}
        this.setState({album: data.results[0]})
        })
    .catch((error) => console.log(error));
  }

Método de renderizado:

componentDidMount() {
    this.getAlbumDetailFromApi(1474669063);
  }
  renderAlbum() {
    // if we have an album display it 
    if (this.state.album) {
      return (
        <View>
        <Text> Arist: {this.state.album.artistName}</Text>
        <Text> Release Date: {this.state.album.releaseDate}</Text>
        </View>
      );
    }
    
  }
  render() {
    console.log('state', this.state);
    return (
    <View style={styles.container}>
        {this.renderAlbum()}
    </View>
  );
  }

Demostración

https://snack.expo.io/aKlDZLLbF

1
Tim 24 jun. 2020 a las 13:40

El problema está en la función getAlbumDetailFromApi.

No devuelve la respuesta. Está regresando promise.

Teniendo en cuenta su código, debe usar async/await y devolver solo la respuesta. Entonces, tu setState tiene parte de datos.

    export async function getAlbumDetailFromApi(id) {

try{
      const  response = await fetch('https://itunes.apple.com/lookup?id='+id) ;
     return response.json();
 }
catch(error) {
     console.log(error);
}

 }
0
RIYAJ KHAN 24 jun. 2020 a las 13:07