如何从react-bootstrap-typeahead中的嵌套对象中过滤？

Question

我正在使用react-bootstrap-typeahead在react中搜索。我面临着过滤嵌套对象的问题。

const products = [
    {
        id : 1,
        name : "abc",
        applications:[
            {
                name:"ink",
                fullname:"INKK"
            },
            {
                name:"solvent",
                fullname:"ssINKK"
            }
        ]
    },
    {
        id:2,
        name:"xyz",
        applications:[
            {
                name:"ink22",
                fullname:"INKK"
            },
            {
                name:"solvent22",
                fullname:"ssINKK"
            }
        ]
    }
]

我想按应用程序名称进行搜索。例如，如果搜索ink22，那么它应该返回id为2的object，下面是我的code.Any，帮助将是useful.Thanks。

import React  from "react";
import Typeahead from "react-bootstrap-typeahead/lib/components/Typeahead";

export default function Search(props){
    const { products } = props

    return (
        <Typeahead
            id="search-product"
            labelKey={option => `${option.name}`}
            minLength={1}
            filterBy={(option, props) => {
                console.log(props)
            }}
            options={products ? products : []}
            placeholder="Search"
            renderMenuItemChildren={(option, props) => (
                <div className="card-body">
                    <img src="/images/default.svg" className="float-left mt-2"/>
                        <div className="message ml-5">
                            <h5 className="card-title">{`${option.ci.name} ${option.name}`} </h5>
                            <h6 className="card-subtitle text-muted">{`${option.brand.name} ${option.range}`}</h6>
                        </div>
                </div>
            )}
        />
    );
};

Answer 1

lodash是个好朋友。

​

const products = [
{
    id : 1,
    name : "abc",
    applications:[
        {
            name:"ink",
            fullname:"INKK"
        },
        {
            name:"solvent",
            fullname:"ssINKK"
        }
    ]
},
{
    id:2,
    name:"xyz",
    applications:[
        {
            name:"ink22",
            fullname:"INKK"
        },
        {
            name:"solvent22",
            fullname:"ssINKK"
        }
    ]
}];

const match = _.find(products, { applications: [{ name: 'ink22' }]});
console.log(match);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.19/lodash.min.js"></script>

​