在搜索结果中包含嵌套的地图数组值

Question

我在一个数组中有任意数量的对象，每个对象都有一个嵌套的 subValues 数组。我正在努力能够使用搜索过滤组件。我能够成功搜索父级对象，但我一直希望能够根据每个顶级嵌套值数组进行过滤。

就我而言，我可以搜索value, 这是一个字符串，但我不知道如何搜索subValues，这是一个包含任意数量字符串的数组。

在我下面的代码段中，您可以看到搜索“一”、“二”等将返回父级别value，但如果您尝试搜索“子”，则数组中不会返回任何内容subValues。

任何指导将不胜感激。

class App extends React.Component {

    constructor(props) {

        super(props)

        this.state = {

            currentValue: null,

            search: '',

        }

    }

    updateSearch = (event) => {

        this.setState({

            search: event.target.value,

        })

    }

    render() {

        const Values = {

            valuesList: [{

                value: 'value one',

                subValues: [

                    'sub value one',

                    'sub value two',

                ]

            }, {

                value: 'value two',

                subValues: [

                    'sub value three',

                    'sub value four',

                ]

            }, {

                value: 'value three',

                subValues: [

                    'sub value five',

                    'sub value six',

                ]

            }

            ]

        };

        let filteredValues = Values.valuesList.filter(

            (values) => {

                return (

                    values.value.toLocaleLowerCase().indexOf(this.state.search.toLocaleLowerCase()) !== -1

                );

            }

        );

        var renderValues = filteredValues.map((valueItem, i) => {

            var renderSubValues = valueItem.subValues.map((subValues, j) => {

                return (

                    <p key={j}>{subValues}</p>

                )

            });

            return (

                <div

                    onClick={() => this.getValue(valueItem.value)}

                    key={i}

                >

                    <p>{valueItem.value}</p>

                    <p>{renderSubValues}</p>

                </div>

            )

        })