Импорт API в React-native

Question

введите описание изображения здесь

Это код, пожалуйста, помогите мне решить эту проблему, изображение, прикрепленное к этому вопросу, показывает ошибку, спасибо

import React, {Component} from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

class AlbumList extends Component {
  state= {albums: [] };

  componentWillMount() {
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
    .then(response => this.setState({albums: response.data }));
}
renderAlbums(){
  return this.state.albums.map(album => <Text>{album.title}</Text>);
}

  render() {
    console.log(this.state);
  return(
    <View>
    {this.renderAlbums()}
    </View>
  );
}
}

export default AlbumList;

Answer 1

У вашего устройства проблема с сетью, проверьте строку состояния вашего телефона, вы можете увидеть это на предоставленном вами скриншоте

Проверьте значок WIFI, он имеет крестик, скорее всего, это основная проблема, связанная с ошибкой вашей сети в желтом поле.

Было бы лучше, если бы вы поместили свой код в try-catch, чтобы вы могли проверить ошибку.

componentWillMount() {


        axios.get('https://rallycoding.herokuapp.com/api/music_albums')
        .then(response => this.setState({albums: response.data }))
        .catch(error => console.log(error))
    }

Answer 2

Попробуйте это. Конечно работает.

import React, {Component} from 'react';
import { View, Text } from 'react-native';
import axios from 'axios';

class AlbumList extends Component {
  state= {albums: [] };

  componentWillMount() {
       axios   .get("https://rallycoding.herokuapp.com/api/music_albums")
      .catch(error => {
        console.log(error);
      })
      .then(response => {
        //console.log(response);
        this.setState({ albums: response.data });
      });
}

  render() {
  return(
    <View>
        {this.state.albums.map((album, key) => {
          return <Text key={key}>{album.title}</Text>;
        })}
    </View>
  );
}
}

export default AlbumList;

Answer 3

В вашей ошибке говорится, что в сообщении говорится, что при запуске axios.get произошла сетевая ошибка, поскольку у вас нет перехвата, он не может обработать ошибку. Попробуйте добавить поймать и выяснить, что не так с вашим запросом сети.

Например:

axios.get('https://rallycoding.herokuapp.com/api/music_albums')
.then(response => this.setState({albums: response.data }))
.catch(error => console.log(error));