ExceptionsManager.js：84未处理的JS异常：ReferenceError：未定义响应

Question

I have a component that look like this

import React, { Component } from 'react';
import { View, Text, StyleSheet } 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(response.data);
        return <View>{ this.renderAlbums() }</View>;uy
    }
}

export default AlbumList;

This is my entire index.js look like

// 1. import library help create a component 
import React from 'react';
import { AppRegistry, View } from 'react-native';
import Header from './src/components/Header';
import AlbumList from './src/components/AlbumList';

// 2. create component 
const App = () => (
    <View>
        <Header headerText={'Albums'}/>
        <AlbumList />
    </View>
)

// 3. render to the device 
AppRegistry.registerComponent('albums', () => App )

When I run my app, I kept getting

ExceptionsManager.js:84 Unhandled JS Exception: ReferenceError:
response is not defined

This error is located at:
    in AlbumList (at index.js:11)
    in RCTView (at View.js:43)
    in App (at renderApplication.js:32)
    in RCTView (at View.js:43)
    in RCTView (at View.js:43)
    in AppContainer (at renderApplication.js:31)

As you can see, I declared it right here

.then(response => this.setState({ albums: response.data }));

How would one go about debugging this further?

Answer 1

You are getting the error in the render method since response is not defined there.

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

Write this.state.albums instead.

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