_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 不是构造函数。

Answer 1

this.DataSource

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

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 对象 请参考 不是构造函数错误

这只说字符串和数组将适用于新的关键字，但不适用于 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);