ExceptionsManager.js：84未处理的JS异常：ReferenceError：未定义响应(ExceptionsManager.js:84 Unhandled JS Exception: ReferenceError: response is not defined)

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

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未处理的JS异常：ReferenceError：未定义响应

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 }));

---

问题

如何进行并进一步调试？

---

我现在对任何建议持开放态度。

任何提示/建议/帮助都将非常感谢！

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?

最满意答案

您在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>; }

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>; }