检查数组中的字符串是否包含另一个字符串 React Native [重复]

Question

下面的代码应该将 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") 时。当我这样做时，我会收到如下所示的警告消息：

Warning Message

当我将其更改为：x.approval == "TPED" 时，它工作正常，所以我不确定问题出在哪里。

我已经为此困扰了几天，因此我们将不胜感激任何帮助。

Answer 1

问题在于它在数组对象中搜索一个名为 include 的属性。显然它找不到它，所以它给了我该属性不存在的警告。为了解决这个问题，我将行更改为

let filteredData = data.filter(x => String(x.approval).includes(approvalVariable));

我希望这对将来的其他人有所帮助，并且您不要像我那样在没有帮助的情况下花费一周的时间来解决这个问题。