我有以下 JSON 文件。我想根据外键（fk）过滤数据。如果我将参数作为 1 传递给我的页面，那么我希望过滤掉 fk 键为 1 且 id 为 1,2 和 3 的前三行。我希望它们显示为列表视图。
如果我将参数作为 2 传递，那么我希望将 id 为 4、5 和 6 的行以及 2 的 fk 过滤掉。
fk 参数来自我以前的具有列表视图的页面，如果用户选择特定项目，则该项目 ID 将传递到此页面。
{
"data":[
{
"id": 1,
"fk": 1,
"Loc": "101 Test drive, TX",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-7899"
},
{
"id": 2,
"fk": 1,
"Loc": "201 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-9999"
},
{
"id": 3,
"fk": 1,
"Loc": "201 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-9999"
},
{
"id": 4,
"fk": 2,
"Loc": "111 Test drive, CA",
"Long": "12365876",
"Lat" : "877669999",
"Phone": "123-456-4040"
},
{
"id": 5,
"fk": 2,
"Loc": "201 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-9999"
},
{
"id": 6,
"fk": 2,
"Loc": "999 Test drive, CA",
"Long": "12365",
"Lat" : "87766",
"Phone": "123-456-8484"
},
{
"id": 7,
"fk": 3,
"Loc": "888 Test drive, CA",
"Long": "12365432",
"Lat" : "87766111",
"Phone": "123-999-8484"
}
]
}
下面是我的整个代码。我确实在 componentdidMount() 中应用了 data.filter，但现在我得到了一个空列表。我不确定我做错了什么：
import React, { Component } from 'react';
import { StyleSheet, Text, View, ListView, ActivityIndicator, TextInput } from 'react-native';
import { StackNavigator } from 'react-navigation';
class MainActivity extends Component {
constructor(props) {
super(props);
this.state = {
// Default Value of this State.
Loading_Activity_Indicator: true,
text:'',
}
this.arrayholder=[];
}
componentDidMount() {
const data = require('./data.json')
var newList = data.filter(obj => obj.fk === 2)
let ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.setState({
Loading_Activity_Indicator: false,
dataSource: ds.cloneWithRows(newList),
}, function() {
// In this block you can do something with new state.
this.arrayholder = newList ;
});
}
SearchFilterFunction(text){
const newData = this.arrayholder.filter(function(item){
const itemData = item.fruit_name.toUpperCase()
const textData = text.toUpperCase()
return itemData.indexOf(textData) > -1
})
this.setState({
dataSource: this.state.dataSource.cloneWithRows(newData),
text: text
})
}
ListViewItemSeparator = () => {
return (
<View
style={{
height: .5,
width: "100%",
backgroundColor: "#000",
}}
/>
);
}
Navigate_To_Second_Activity=(fruit_name)=>
{
//Sending the JSON ListView Selected Item Value On Next Activity.
this.props.navigation.navigate('Second', { JSON_ListView_Clicked_Item: fruit_name });
}
static navigationOptions =
{
title: 'MainActivity',
};
render()
{
if (this.state.Loading_Activity_Indicator) {
return (
<View style={styles.ActivityIndicator_Style}>
<ActivityIndicator size = "large" color="#009688"/>
</View>
);
}
return (
<View style={styles.MainContainer}>
<TextInput
style={styles.TextInputStyleClass}
onChangeText={(text) => this.SearchFilterFunction(text)}
value={this.state.text}
underlineColorAndroid='transparent'
placeholder="Search Here"
/>
<ListView
dataSource={this.state.dataSource}
renderSeparator= {this.ListViewItemSeparator}
renderRow={(rowData) => <Text style={styles.rowViewContainer}
onPress={this.Navigate_To_Second_Activity.bind(this, rowData.Loc)} >{rowData.Loc}</Text>}
/>
</View>
);
}
}
class SecondActivity extends Component
{
static navigationOptions =
{
title: 'SecondActivity',
};
render()
{
return(
<View style = { styles.MainContainer }>
<Text style = { styles.TextStyle }> { this.props.navigation.state.params.JSON_ListView_Clicked_Item } </Text>
</View>
);
}
}
export default MyNewProject = StackNavigator(
{
First: { screen: MainActivity },
Second: { screen: SecondActivity }
});
const styles = StyleSheet.create(
{
MainContainer:
{
justifyContent: 'center',
flex:1,
margin: 10
},
TextStyle:
{
fontSize: 23,
textAlign: 'center',
color: '#000',
},
rowViewContainer:
{
fontSize: 17,
paddingRight: 10,
paddingTop: 10,
paddingBottom: 10,
},
ActivityIndicator_Style:
{
flex: 1,
alignItems: 'center',
justifyContent: 'center',
left: 0,
right: 0,
top: 0,
bottom: 0,
},
TextInputStyleClass:{
textAlign: 'center',
height: 40,
borderWidth: 1,
borderColor: '#009688',
borderRadius: 7 ,
backgroundColor : "#FFFFFF"
}
});
任何帮助将不胜感激。