React Native javascript过滤器返回空数组,即使值存在于正在搜索的数组对象中

dsekswqp  于 2022-11-25  发布在  React
关注(0)|答案(2)|浏览(112)

我在react原生项目中使用javascript过滤器时遇到困难。我需要帮助来过滤typescript react原生项目中的对象数组。我遇到的主要问题是在名为onSearchTextChanged的函数中,特别是使用javascript过滤器的搜索方法
下面是屏幕的主要代码

const renderItem = ({ item }) => (

    <Pressable style={cardUtilities} android_ripple={{ color: "#dddddd" }} onPress={() => onTapItemHandler(item)}>

      <View style={main}>
        <Text style={utilityname}>{item.title}</Text>
        <Text style={utilityDesc}>{item.description}</Text>
      </View>
    </Pressable>
  )

  const onSearchTextChanged = (e) => {
    setSearchQuery(e)
    search()
  }

  const search = () => {
    console.log("inside handleSearchButtonPressed")
    if (!itemListStore) {
      return
    }
    // const text = searchQuery.toLowerCase()
    console.log("inside 100")
    console.log(itemListStore)

    // array of output objects
    const filteredObjs = itemListStore.filter(
      // eslint-disable-next-line array-callback-return
      ({ item }) => {
       (JSON.stringify(item?.description[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        (JSON.stringify(item?.title[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
       ( JSON.stringify(item?.link[0]))?.toLowerCase().includes(searchQuery.toLowerCase())
      })
    console.log("filteredObjs", JSON.stringify(filteredObjs))

    console.log(typeof filteredObjs)
    console.log(filteredObjs.length)

    console.log("inside 400")
    console.log("searchQuery ", searchQuery)

    if (!searchQuery || searchQuery === "") {
      console.log("1")

    } else if (!Array.isArray(filteredObjs) && !filteredObjs.length) {
      console.log("2")

      // set no data flag to true so as to render flatlist conditionally
      setNoData(true)

    } else if (Array.isArray(filteredObjs)) {
      console.log("3")

      setNoData(false)
      setItemListStore(filteredObjs)
    }

  }

  return (
    <SafeAreaView style={container}>
      {/* <Loader loading={loading} /> */}
      <View style={fullContainer}>
        <View style={MAIN_IMG}>
          <Image style={$welcomeLogo} source={Images.appLogo} resizeMode="contain" />
        </View>
        <View style={TOP_143}>

          <TextInput
            style={textInputStyle}
            onChangeText={onSearchTextChanged}
            underlineColorAndroid="transparent"
            placeholder="Search Here"
            value={searchQuery}
          />

        </View>
        <FlatList
          data={itemListStore}
          renderItem={renderItem}
          keyExtractor={() => {
            return uuid.v4() + ""
          }} />
      </View>

    </SafeAreaView>
  )

下面是由要过滤的对象数组组成的示例数据

[
   {
      "description":[
         "At company; Professionals, we believe that individuals and organisations need to apply a whole new level of thinking to navigate and thrive in the emerging world. We no longer have the luxury of conducting business as usual. The organisation or individual that will survive in today&rsquo;s world is one who can imagine and create their future.
​
For anyone who feels uneasy and boxed up in their careers, or entrepreneurs and organisations who want to stay ahead of the new era, or youths who want to be equipped for the future - we can help you achieve this."
      ],
      "guid":[
         [
            "Object"
         ]
      ],
      "industry":[
         "Consulting"
      ],
      "link":[
         "https://www.myjobmag.com/jobs/business-development-executive-at-protege-management-2"
      ],
      "pubDate":[
         "Fri, 18 Nov 2022 17:31:56 GMT"
      ],
      "title":[
         "Business Development Executive at Protege Management"
      ]
   },
   {
      "description":[
         "Montaigne Place Is the leading luxury cosmetics, wellbeing and fragrance company in country. We are the hallmark of sophistication, luxury makeup, skincare innovation and sublime fragrances."
      ],
      "guid":[
         [
            "Object"
  ]
      ],
      "industry":[
         "Sales / Retail"
      ],
      "link":[
         "https://www.myjobmag.com/jobs/business-development-manager-female-at-montaigne-ah-limited"
      ],
      "pubDate":[
         "Fri, 18 Nov 2022 17:28:02 GMT"
      ],
      "title":[
         "Job Openings at Montaigne AH Limited"
      ]
   }]

下面是使用searchQuery值business输出的日志

LOG  filteredObjs []
 LOG  object
 LOG  0
 LOG  inside 400
 LOG  searchQuery  Business
 LOG  3
cvxl0en2

cvxl0en21#

我看到两个错误
您的代码:

const filteredObjs = itemListStore.filter(

      // here you destructure the row and take item but item doesn't exist in your object 
      ({ item }) => {
// here there is no return       
(JSON.stringify(item?.description[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        (JSON.stringify(item?.title[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
       ( JSON.stringify(item?.link[0]))?.toLowerCase().includes(searchQuery.toLowerCase())
      })

你需要做的

const filteredObjs = itemListStore.filter(
  (item) => {
    return (JSON.stringify(item?.description[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (JSON.stringify(item?.title[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
      (JSON.stringify(item?.link[0]))?.toLowerCase().includes(searchQuery.toLowerCase())
  })
yizd12fk

yizd12fk2#

似乎您的过滤器回调函数中缺少return语句。您必须返回布尔值结果才能使其工作

const filteredObjs = itemListStore.filter(
      // eslint-disable-next-line array-callback-return
      ({ item }) => {
       return (JSON.stringify(item?.description[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
        (JSON.stringify(item?.title[0]))?.toLowerCase().includes(searchQuery.toLowerCase()) ||
       ( JSON.stringify(item?.link[0]))?.toLowerCase().includes(searchQuery.toLowerCase())
      })

相关问题