Question

Hi,
Please checkout my code below

'use strict';
var React = require('react-native');
var Dimensions = require('Dimensions');
var windowSize = Dimensions.get('window');

var {
  AppRegistry,
  Component,
  StyleSheet,
  Text,
  View,
  AsyncStorage,
  Alert,
} = React;

var api = require('./api.js');
var Row = require('./Row');

var Projects = React.createClass({  
  getInitialState: function() {     
    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, });
    return {      
      dataSource: ds,
      loaded: false,
      noData: false,
    }
  },

  componentDidMount: function() { 
    this.fetchData(); 
  },

  fetchData: function() { 
      fetch(api.url+"projects/"+this.props.token+"/", {
           headers: { 'Accept': 'text/json', 'Content-Type': 'text/json', },
       })
       .then((response) => response.json())
       .then((responseData) => { 
            //Alert.alert( 'projects response', JSON.stringify(responseData) );
            if(responseData.type == 'success'){

                if(responseData.result.length > 0){
                    this.setState({
                        loaded: false,

                    });
                }else{
                    this.setState({
                        loaded: true,
                        noData: true
                    });
                }

            }else if(responseData.type == 'error'){
                Alert.alert( 'Error', responseData.msg );
            }else{
                Alert.alert( 'Error', 'Oops! Something went wrong. Sorry for the inconvenience caused. Please try again.' );
            }
        })
        .catch((error) => { Alert.alert( '_valid_token error', error); });
  },

  loadingView: function(){
      return(<View style={styles.container}>
          <Text>Loading Projects...</Text>
      </View>);
  },

  noRecords: function(){
      return(<View style={styles.container}>
          <Text>No Projects to show</Text>
      </View>);
  },

  render: function() {    
    if(!this.state.loaded){
        return this.loadingView();
    }else{
        if(this.state.noData){
            return this.noRecords();
        }else{
            <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} style={styles.listView} />
        }
    }

  },

  renderRow: function(row){
      return(<Row title={row.actions_name} subtitle={row.action_plan} tagline={row.company_name}/>);
  },
});

var styles = StyleSheet.create({
    container: {      
      flex: 1,
      backgroundColor: 'transparent',
      justifyContent: 'center',
      alignItems: 'center',
    }, 
    listView: {

    }
});

module.exports = Projects;

I am getting error right at

    var ds = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, });

react-native version I am using is 0.20.0
and react-native-cli 0.1.10

Error screenshot as below
[![enter image description here][1]][1]

Answer 1

My Bad..
I didn't use return function in render method
Just changed

<ListView dataSource={this.state.dataSource} renderRow={this.renderRow} style={styles.listView} />


to

return(<ListView dataSource={this.state.dataSource} renderRow={this.renderRow} style={styles.listView} />);

Listview DataSource错误 - React Native

1 个答案: