如何在reactjs中过滤多数组列表

Question

我试图从具有多数组的列表中实现搜索功能。所以我想从数组中搜索特定的关键字。我已经尝试过，但是会引发错误。

搜索数组：

const listComponent = [{
    id: 0,
    title: "Common",
    subMenu: [{
      image: "",
      secTitle: "",
      subTitle: ""
    }]
  },
  {
    id: 1,
    title: "Compute",
    subMenu: [{
        image: require("../../assets/images/scaling.png"),
        secTitle: "one comp",
        subTitle: ""
      },
      {
        image: require("../../assets/images/ec2.png"),
        secTitle: "two comp",
        subTitle: ""
      },
      {
        image: require("../../assets/images/lambda.png"),
        secTitle: "three comp",
        subTitle: ""
      },
      {
        image: require("../../assets/images/zone.png"),
        secTitle: "four comp",
        subTitle: ""
      }
    ]
  },
  {
    id: 2,
    title: "Second",
    subMenu: [{
      image: "",
      secTitle: "",
      subTitle: ""
    }]
  },
  {
    id: 3,
    title: "Third",
    subMenu: [{
      image: "",
      secTitle: "",
      subTitle: ""
    }]
  },
  {
    id: 4,
    title: "Fourth",
    subMenu: [{
      image: "",
      secTitle: "",
      subTitle: ""
    }]
  }
];

类声明：

constructor(props) {
  super(props);

  this.state = {
    components: listComponent,
    filterResult: listComponent
  };

  this.filterComponents = this.filterComponents.bind(this);
}



UNSAFE_componentWillReceiveProps(nextProps) {
  this.setState({
    components: nextProps.components
  });
}

拟合逻辑：

filterComponents = event => {
  let value = event.target.value;
  let components = this.state.components;

  let filterResult = components.filter(
    component =>
      component.subMenu.findIndex(sub =>
        sub.secTitle.toLowerCase().includes(value)
      ) !== -1
  );

  console.log(filterResult);

  this.setState({ filterResult });
};

JSX：

<ul className="listAll">
  {this.state.filterResult.map((items, key) => (
    <li key={key}>
      <div className="compTitle" onClick={()=> this.openCloseComponent(items.id)} >
        <p>{items.title}</p>
        {this.state.isComOpen === items.id && this.state.isOpen ? (
        <KeyboardArrowDown className="compArrow" /> ) : (
        <KeyboardArrowUp className="compArrow" /> )}
      </div>
      <ul className={ this.state.isComOpen===i tems.id && this.state.isOpen ? "displayBlock secondDrop" : "displayNone" }>
        {items.subMenu.map((submenu, i) => (
          <li key={i}>
            <img src={submenu.image} alt="" />
            <div>
              <p className="secTitle">{submenu.secTitle}</p>
              <p className="subTitle">{submenu.subTitle}</p>
            </div>
          </li>
        ))}
      </ul>
    </li>
  ))}
</ul>
{this.state.filterResult.length === 0 && (
  <p className="noComp">No components found</p>
)}

问题

我想搜索secTitle在subMenu。匹配任何关键字都secTitle应该显示并且other应该隐藏。在关于代码抛出错误。

因此，我该如何解决它，任何答案将不胜感激！

如果我搜索one comp输出应该是

{
  id: 1,
  title: "Compute",
  subMenu: [
    {
      image: require("../../assets/images/scaling.png"),
      secTitle: "one comp",
      subTitle: ""
    }
  ]
}

但现在的输出是

{
  id: 1,
  title: "Compute",
  subMenu: [
    {
      image: require("../../assets/images/scaling.png"),
      secTitle: "one comp",
      subTitle: ""
    },
    {
      image: require("../../assets/images/ec2.png"),
      secTitle: "two comp",
      subTitle: ""
    },
    {
      image: require("../../assets/images/lambda.png"),
      secTitle: "three comp",
      subTitle: ""
    },
    {
      image: require("../../assets/images/zone.png"),
      secTitle: "four comp",
      subTitle: ""
    }
  ]
}

Answer 1

代替

filterResult = components.filter((component, index) => {
  console.log(component.subMenu[index].secTitle);
  return component.subMenu[index].secTitle.toLowerCase().search(value) !== -1;
});

代码应如下所示：

const listComponent = [
{
    id: 0,
    title: "Common",
    subMenu: [
    {
        image: "",
        secTitle: "abc",
        subTitle: ""
    }
    ]
},
{
    id: 1,
    title: "Common",
    subMenu: [
    {
        image: "",
        secTitle: "def",
        subTitle: ""
    }
    ]
}
]

let value = "abc";

let filterResult = listComponent.filter((component) => {
  return component.subMenu.findIndex((sub) => {
    return sub.secTitle === value;
  }) >= 0;
});

console.log(filterResult);