null 不是评估 this.state.<name> 的对象

Question

这个问题可能很常见，但我之所以问是因为我无法解决它。我在第 22 行得到“null 不是对象（评估 'this.state.albums'）”

而且我有点不清楚调用后返回的数据类型以及如何处理它。拜托，有人可以帮我解释一下吗？我正处于学习阶段。当我直接提醒 response.data 我得到 [object][object] 我必须执行 JSON stringify 才能查看数据。我们为什么要这样做？

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

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

   componentWillMount(){
    console.log('in componentWillMount');
    //debugger;
    //alert("first"+this.state);
    axios.get('https://rallycoding.herokuapp.com/api/music_albums')
    .then((response) => {
        //console.log(response);
        //alert(JSON.stringify(response));
        this.setState({albums : response.data});
        //alert(JSON.stringify(this.state.albums));
    })
    .catch((error) => {
        alert(error);
    });
}

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

 componentDidMount() {
console.log('I was triggered during componentDidMount')
 }

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

Answer 1

您的构造函数中缺少this。

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

至于警报，您不能提醒对象它必须是一个字符串。所以提醒JSON 对象就是[object object]。如果您使用JSON.stringify，它会将对象转换为可用于警报的字符串。在您的console 中，您可以很好地记录对象，并且它们的结构更具可读性。我会坚持使用console.log 进行调试。