Question

当我尝试使用genymotion作为模拟器运行它时出现此错误。这是我的代码

    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() {
   this.state.albums.map(album => <Text> { album.title } </Text>);
}

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



export default AlbumList;

我错过了什么吗？如果有人可以帮助我，请告诉我，我留在这里。

Answer 1

您最初将state.albums设置为一个空对象，但尝试调用作为数组方法的map。

还要确保您api的response.data是一个数组。

最佳做法是在构造函数中初始化状态。

class AlbumList extends Component {
      constructor(props) {
           super(props);
           this.state={
                albums: []
           }; 
      }
      ...
 }

React-native：TypeError：未定义不是一个函数（this.state.albums.map）

1 个答案: