_reactNative2.default.DataSource 不是构造函数

Question

我是新手。我正在使用 Android Studio 2.3.2 进行模拟。我有以下代码，我认为这是相当标准的

import React, { Component } from 'react';
import ListView from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component {

  componentWillMount() {
     const ds = new ListView.DataSource({
     rowHasChanged: (r1, r2) => r1 !== r2
     });

     this.DataSource = ds.cloneWithRows(this.prop.libraries);
  }

  renderRow(library) {
    return <ListItem library={library} />;
  }

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

const maptStateToProps = state => {
  return { libraries: state.libraries };
};

export default connect(maptStateToProps)(LibraryList);

但是我得到了错误

_reactNative2.default.DataSource is not a constructor.

Answer 1

this.DataSource

不是组件的一部分class在状态中使用它你应该使用

const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = { dataSource: ds.cloneWithRows(['row 1', 'row 2']), };

然后在你的渲染函数中

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

更新

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

export default class Tests extends Component {
componentWillMount() {
  this.state = {
    libraries: [1, 2, 3]
  }
   const ds = new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2
   });

   this.DataSource = ds.cloneWithRows(this.state.libraries);
}

renderRow(library) {
  return <Text>{library}</Text>
}

render () {
  return (
    <View style={styles.container}>
     <ListView
       dataSource={this.DataSource}
       renderRow={this.renderRow}
     />
   </View>
  );
}
}

const styles = StyleSheet.create({
  container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
 },
});

AppRegistry.registerComponent('Tests', () => Tests);

`

更新 2

现在我明白了，我认为 this.props.libraries 不是一个数组，它是一个 json 对象请参阅 not a constructor error

这只是说字符串和数组将使用新关键字而不是 json

更新 3

我还注意到您打错了 this.prop.libraries 而不是 this.props.libraries

Answer 2

问题已解决，

正在替换

 import ListView from 'react-native';

与

 import { ListView } from 'react-native';

并更正

的语法错误

 this.DataSource = ds.cloneWithRows(this.prop.libraries);

与

 this.DataSource = ds.cloneWithRows(this.props.libraries);

_reactNative2.default.DataSource 不是构造函数

_reactNative2.default.DataSource is not a constructor

reactjs

react-native

react-native-android