javascript - 过滤器不适用于 React 中具有 null 值的对象

Question

我已经尝试并测试了许多概念和代码片段，但没有一个有效。我想过滤我的数据(例如，如果我输入“a”，它应该返回包含“a”的数据，如果在搜索框中没有输入任何值，那么它应该返回所有数据)它的工作正常，对象中没有任何空值，但是对于获取一些可为 null 值的第二个 api，其抛出错误。

代码工作正常:

 return Object.keys(item).some(key =>
        item[key].includes(filterItem));

我尝试通过删除空值并仅给出字符串数据键来修复，但无法正常工作。 任何帮助将不胜感激。

我尝试实现的修复:

Object.keys(item).forEach(k => {
           if (item[k] !== null) {
            console.log(item[k])
             return Object.keys(item).some(key =>
              item[key].includes(filterItem)
            );
          }
   })

错误:

编辑:

/* Input Data

const input=[{DeviceType: "CONSUMER", DeviceSubType: "CARD", status: "ACTIVE", categoryname: null, count: 5}
 {DeviceType: "CONSUMER", DeviceSubType: "CARD", status: "AVAILABLE", categoryname: null, count: 2}
2: {DeviceType: "MERCHANT", DeviceSubType: null, status: "ACTIVE", categoryname: "Agent", count: 2}
 {DeviceType: "MERCHANT", DeviceSubType: null, status: "ACTIVE", categoryname: "MerchantOffline", count: 2}
 {DeviceType: "MERCHANT", DeviceSubType: null, status: "ACTIVE", categoryname: "MerchantOnline", count: 1}
 {DeviceType: "MERCHANT", DeviceSubType: null, status: "AVAILABLE", categoryname: null, count: 3}
 {DeviceType: "MERCHANT", DeviceSubType: "XipPOSApp", status: "AVAILABLE", categoryname: null, count: 3}] */
 
 import React, { Component } from 'react'
import "../css/Search.css"
import ReportList from './reportList'


export default class Search extends Component {
  constructor(props) {
    super(props)
    this.state = {
      showData: this.props.list,
      filterItem: "",
      filterCount: "initial"
    }
  }


  handleChange = (e) => {
    this.setState({
      filterItem: e.target.value.toUpperCase(),
      filterCount: "called"
    })

  }



  render() {
    //filtering the data
    const { filterItem, showData } = this.state;

    // console.log(showData)
    const filteredData = showData.filter(item => {

      if (item != null && typeof item != "number") {

        // console.log("item")
        // console.log(item)
        // Object.keys(item).forEach(k => {
        //   if (item[k] !== null && filterItem!==null) {
        //     console.log(item[k])
        //     return Object.keys(item).some(key =>{
        //       console.log(item[key])
        //       item[key].includes(filterItem)
        //     }
           
        //     );
        //   }
        // })

        //working
        return Object.keys(item).some(key =>
         
          item[key].includes(filterItem)
       
          
         
        );
      }
    });
    console.log("filteredData")
    console.log(filteredData)


    const checkValidation = () => {
      if (this.state.filterCount === "initial") {
        return <ReportList data={filteredData} />
      }
      else if (this.state.filterCount === "called") {
        return filteredData != "" ? <ReportList data={filteredData} /> : "NO DATA FOUND"

      }
    }



    return (
      <div>
        <input type="text" placeholder="Search.." onChange={this.handleChange} className="search" />
        <div >{checkValidation()} </div>



      </div>
    )
  }
}

附加带有输入数据的代码片段 输出:在搜索框中输入“ca”时必须提供卡片数据

Answer 1

您需要验证您的item[key]。

return Object.keys(item).some(key =>
    (typeof item[key] === 'string' && item[key].includes(filterItem)) 
    || (typeof item[key] === 'number') && item[key] === Number(filterItem))