javascript - 异常管理器.js :84 Unhandled JS Exception: ReferenceError: response is not defined

Question

我有一个看起来像这样的组件

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;

这是我整个 index.js 的样子

// 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 )

当我运行我的应用程序时，我不断得到

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)

如你所见，我在这里声明了它

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

如何进一步调试它？

Answer 1

您在 render 方法中遇到错误，因为那里没有定义 response。

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

改为编写 this.state.albums。

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