可能未处理的Promise拒绝（id：0）错误：本机中的网络错误

Question

可能未处理的Promise拒绝（id：0）错误：本机中的网络错误

   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

我这样做了，我得到了数据。

 componentWillMount() {
  await fetch("https://rallycoding.herokuapp.com/api/music_albums")
  .then(response => response.json())
  .then(data => {

    console.log("data" + JSON.stringify(data))
  });

 }

Answer 2

这肯定不能回答你的问题，但我首先看到的是：

renderAlbums() {
    return this.state.albums.map(album => <Text>{albums.title}</Text>);
} 

应该

renderAlbums() {
    //In map you have to use album, not albums.
    return this.state.albums.map(album => <Text>{album.title}</Text>);
}

Answer 3

我认为你应该尝试重新加载应用程序/重新安装应用程序/重新启动模拟器/尝试新的模拟器。我也有使用常规network error的多个通用fetchs，它们都只是模拟器很奇怪。

Answer 4

我试过这个，它正常工作：

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