Question

所以，我无法弄清楚为什么我的代码中的最后一行最终显示错误，而我找不到任何其他帖子在我的特定情况下有所帮助。这是代码：

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

class AlbumList extends Component {
  state = { albums: [] };


componentWilMount() {
  fetch('https://rallycoding.herokuapp.com/api/music_albums')
  .then(response => response.json())
  .then(response => this.setState({ albums: response.data }));
}

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

  render() {
    console.log(this.state.albums);
  }

  return() {
  <View>
  {this.renderAlbums()}
  </View>
}

Answer 1

因为你像方法一样调用return，但是return应该在你的render（）方法中。

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

class AlbumList extends Component {
  state = { albums: [] };


  componentWilMount() {
    fetch('https://rallycoding.herokuapp.com/api/music_albums')
      .then(response => response.json())
      .then(response => this.setState({ albums: response.data }));
  }

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

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

解析错误：意外令牌（致命）React Native JS

1 个答案: