javascript - 检查数组中的字符串是否包含另一个字符串 React Native

Question

这个问题已经有答案了:

Check if a string contains another string React Native (1 个回答)

已关闭 5 年前。

下面的代码应该以数组形式从 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

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

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

我希望这能对其他人有所帮助，并且您不会像我一样花一周时间在没有帮助的情况下尝试解决问题。