下面的代码应该从Firebase中以数组形式获取数据，然后根据值是否包含字符串对其进行过滤。数据示例如下：
data = [
{
"number": 1,
"waterCapacity": 50,
"diameter": 229,
"workingPressure": 200,
"testPressure": 300,
"h2Compatible": "no",
"designStandard": "ISO 9809-1",
"approval": "TPED",
"inletThread": "25E",
"manufacturer": "Worthington",
"specificationNumber": 19313614,
"comments": "rev 16.09.2014",
"country": "cylinder"
},
{
"number": 2,
"waterCapacity": 50,
"diameter": 229,
"workingPressure": 200,
"testPressure": 300,
"h2Compatible": "no",
"designStandard": "ISO 9809-1",
"approval": "TPED",
"inletThread": "25E",
"manufacturer": "Vitkovice",
"specificationNumber": 19313601,
"country": "cylinder"
}
]
我用于检索数据和过滤数据的代码如下所示：
import React, { Component } from 'react'; import {
Platform,
StyleSheet,
Text,
TextInput,
View,
Button,
Image,
TouchableOpacity,
FlatList,
ScrollView,
} from 'react-native';
import StickyHeaderFooterScrollView from 'react-native-sticky-header-footer-scroll-view'
import Statusbar from '/Users/paulg/Desktop/LindeProject/LindeProject/components/Statusbar.js'
import ViewContainer from '/Users/paulg/Desktop/LindeProject/LindeProject/components/ViewContainer.js'
import {styles} from '/Users/paulg/Desktop/LindeProject/LindeProject/authentication/styles.js'
import {firebaseRef} from '/Users/paulg/Desktop/LindeProject/LindeProject/services/Firebase.js'
import firebase from 'firebase'
import SearchCylinder from '/Users/paulg/Desktop/LindeProject/LindeProject/Pages/searchCylinder.js'
import {Table, Row, Rows} from 'react-native-table-component'
export default class valveDB extends Component{
static navigationOptions = {
title: 'Cylinder Database',
};
constructor(props) {
super(props)
this.state = {
data: [],
countryArray: '',
region:'',
countrySelected: ''
}
}
componentWillMount() {
this.fetchData();
}
fetchData = async () => {
var data1 = [];
let approval = this.props.navigation.state.params.approval
let comments = this.props.navigation.state.params.comments
let designStandard = this.props.navigation.state.params.designStandard
let diameter = this.props.navigation.state.params.diameter
let h2Compatible = this.props.navigation.state.params.h2compatible
let inletThread = this.props.navigation.state.params.inletThread
let manufacturer = this.props.navigation.state.params.manufacturer
let specificationNumber = this.props.navigation.state.params.specificationNumber
let testPressure = this.props.navigation.state.params.testPressure
let waterCapacity = this.props.navigation.state.params.waterCapacity
let workingPressure = this.props.navigation.state.params.workingPressure
var fireBaseResponse = firebase.database().ref().orderByChild("country").equalTo("cylinder");
fireBaseResponse.once('value').then(snapshot => {
snapshot.forEach(item =>{
const temp = item.val();
data1.push(temp);
return false;
});
////////Filter Method/////////
if(approval == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.approval.includes("TP"))
}
if(waterCapacity == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.waterCapacity == waterCapacity)
}
if(designStandard == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.designStandard == designStandard)
}
if(diameter == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.diameter == diameter)
}
if(inletThread == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.inletThread == inletThread)
}
if(workingPressure == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.workingPressure == workingPressure)
}
if(comments == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.comments == comments)
}
if(manufacturer == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.manufacturer == manufacturer)
}
if(testPressure == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.testPressure == testPressure)
}
if(specificationNumber == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.specificationNumber == specificationNumber)
}
if(h2Compatible == '') {
console.log("good")
}
else {
data1 = data1.filter(x => x.h2Compatible == h2Compatible)
}
/////////////////////Filter Method//////////////////
if(data1.length == 0){
this.setState({countrySelected: "No Results Were Found"}) }
data1 = data1.slice(0, 50);
this.setState({data: data1});
});
}
render(){
var {navigate} = this.props.navigation;
let {params} = this.props.navigation.state;
return(
<ViewContainer>
<ScrollView maximumZoomScale = {5} scrollEnabled = {true} minimumZoomScale = {1} zoomScale = {.8}>
<FlatList
data = {this.state.data}
keyExtractor = {(x, i) => i.toString()}
renderItem ={({item}) =>
<Text style = {styles.itemText}>
Approval: {item.approval} | Manufacturer: {item.manufacturer} | Specification Number: {item.specificationNumber} |
H2 Compatible: {item.h2Compatible} | Diameter: {item.diameter} | Water Capacity: {item.waterCapacity} |
Inlet Thread: {item.inletThread}{"\n"}
</Text>
}
/>
<Text style = {styles.countryErrorText}>{this.state.countrySelected}</Text>
</ScrollView>
</ViewContainer>
)
}
}
我遇到的问题是当我尝试执行x.approval.includes（“ TP”）时。当我这样做时，我得到以下警告消息：
当我将其更改为说：x.approval ==“ TPED”时，它可以很好地工作，所以我不确定问题出在哪里。
我已经坚持了几天，所以任何帮助将不胜感激。
答案 0 :(得分：2)
问题在于它正在数组对象中搜索一个名为include的属性。显然，它找不到它，因此警告我该财产不存在。为了解决这个问题，我将行更改为
let filteredData = data.filter(x => String(x.approval).includes(approvalVariable));
我希望这会在将来对其他人有所帮助，并且您不会像我一样花一个星期在没有帮助的情况下尝试解决这个问题。