在React-native中导入api

Question

enter image description here

这是代码请帮我解决这个问题，附在这个问题上的图片显示错误，谢谢

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

您的错误显示消息说运行axios.get时出现网络错误，因为您没有捕获它无法处理错误。尝试添加一个catch并找出您的网络请求有什么问题。

对于前：

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

Answer 3

试试这个吧。肯定有效。

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;