react-native - map不是react-native中的函数

Question

我想从api获取一些数据并在我的应用程序中显示数据。这是我的代码
类AlbumList扩展了Component {

state = { albums: [] };

async componentWillMount() {
try {
  const data = await axios.get(
      'https://rallycoding.herokuapp.com/api/music_albums'
  );
  this.setState({ albums: data });
} catch (err) {
  console.error(err.message);
}
}

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

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

这将产生错误this.state.albums.map不是一个函数。
有什么办法解决这个问题？

Answer 1

由于axios不返回数组，因此发生错误“将其映射为非函数”。
Axios返回一个带有状态，数据等键的对象。

const data = await axios.get(
  'https://rallycoding.herokuapp.com/api/music_albums'
);
console.log(data);
console.log(data.data); // album data
this.setState({album: data.data});

当不等待使用时：

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

因此，您必须检查axios get返回的对象键“数据”。