Question

我正在尝试渲染所有我最喜欢的Taylor Swift专辑的JSON。我认为使用列表视图而不是maping over JSON是明智的。

我正在努力让我的listview正确呈现。截至目前，我收到一个错误“undefined不是一个对象（评估'dataSource.rowIdentites'）。

import React,{Component} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';

import axios from 'axios';
 const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1!==r2});

class WordList extends Component{


   state = {albums: []} 



componentdidMount(){

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


        this.dataSource = ds.cloneWithRows(this.state.albums);
}



  render() {
    return (
      <ListView
        dataSource={this.state.dataSource}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}


export default WordList;

我能够让静态列表完美呈现，但是当使用Web列表时，我遇到了麻烦。请让我知道我哪里出错了。

感谢。

Answer 1

在您的代码中，您尝试从this.state.dataSource进行渲染，但是您的状态属性未在构造函数中定义。对您的代码执行此更改：

import React,{Component} from 'react';
import { Text, View,StyleSheet,Image,TextInput,ListView} from 'react-native';
import axios from 'axios';

class WordList extends Component {

  constructor (props) {
    super(props)
    this.state = {
      albums: []
    }
    this.dataSource = new ListView.DataSource({rowHasChanged: (r1, r2) => r1!==r2});
  }

  componentdidMount(){
   axios.get('https://rallycoding.herokuapp.com/api/music_albums')
     .then(response => this.setState({albums:response.data}));
  }

  render() {
    return (
      <ListView
        dataSource={this.dataSource.cloneWithRows(this.state.albums)}
        renderRow={(rowData) => <Text>{rowData}</Text>}
      />
    );
  }
}

export default WordList;

反应原生动态列表视图Taylor Swift

1 个答案: