绑定 listView 时，我的渲染函数出现错误。以下是错误的代码和屏幕截图：
我的代码如下。我正在尝试将搜索框放在列表视图的顶部。一切正常，但是当我尝试放置搜索框时，我开始收到上述错误：
import React, { Component } from 'react';
import { Text, View, StyleSheet, ListView, TextInput} from 'react-native';
import { Provider, connect } from 'react-redux';
import { createStore } from 'redux'
import reducers from '../reducers/ServiceReducer';
import ServiceItem from './ServiceItem';
import Icon from 'react-native-vector-icons/EvilIcons';
import ServiceDetail from './ServiceDetail';
const styles = StyleSheet.create({
separator: {
flex: 1,
height: StyleSheet.hairlineWidth,
backgroundColor: '#8E8E8E',
},
text: {
marginLeft: 12,
fontSize: 16,
},
header_footer_style:{
width: '100%',
height: 45,
backgroundColor: '#FF9800'
},
textStyle:{
alignSelf:'center',
color: '#fff',
fontSize: 18,
padding: 7
},
MainContainer:
{
justifyContent: 'center',
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: 'center',
color: '#000',
},
});
const store = createStore(reducers);
class AutoCompActivity extends Component {
constructor(props) {
super(props);
this.state = {
// Default Value of this State
text: '',
}
this.arrayholder =[];
}
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.services.ser.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
renderHeader = () => {
var header = (
<View style={styles.header_footer_style}>
<Text style={styles.textStyle}> Tap the service to find the Loaction </Text>
</View>
);
return header;
};
renderInitialView() {
const ds = new ListView.DataSource({
rowHasChanged: (r1, r2) => r1 !== r2,
});
this.setState({
dataSource : ds.cloneWithRows(this.props.services),
}, function(){
this.arrayholder=this.props.services;
});
if (this.props.detailView === true) {
return (
<ServiceDetail />
);
} else {
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid='transparent'
placeholder="Search Here"
/>
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
renderSeparator={(sectionId, rowId) => <View key={rowId} style={styles.separator} />}
renderHeader={this.renderHeader}
style={{marginTop:10}}
renderRow={(rowData) =>
<ServiceItem services={rowData} />
}
/>
</View>
);
}
}
render() {
return (
<View style={styles.container}>
{this.renderInitialView()}
</View>
);
}
}
const mapStateToProps = state => {
return {
services: state.services,
detailView: state.detailView,
};
};
const ConnectedAutoCompActivity = connect(mapStateToProps)(AutoCompActivity);
const app1 = () => (
<Provider store={store}>
<ConnectedAutoCompActivity />
</Provider>
)
export default app1;
我的 JSON (service.json) 文件如下所示：
[
{
"id":0,
"ser": "Test Service",
"Location": "TestLoc",
"Phone1":"(999)-999-5050",
"SecondLoc": "TestLoc2",
"email":"test@test.com",
"sourceLat":"33.977806",
"sourceLong":"-117.373261",
"destLatL1":"33.613355",
"destLongL1":"-114.596569",
"destLatL2":"33.761693",
"destLongL2":"-116.971169",
"destAddr1": "Test Address, Test Drive",
"destAddr2": "Test Address2, Test Drive2",
"onlineURL":"",
"Phone2": "(900)-900-3333"
},
]
任何帮助将不胜感激。