Javascript React中的筛选器搜索，出现问题'；未找到任何内容'；条件

我在创建一个条件时遇到了一个问题，该条件会通知用户什么也没有找到。我已经尽了一切努力，直到我最终放弃并写信给你寻求帮助

import React, {Component} from "react";
import {Link} from "react-router-dom";

class SearchCars extends Component{

    const allCars = [
        {name: CarA, vin: exampleVin1},
        {name: CarB, vin: exampleVin2}
    ]

    state = {
        filterText: '',
        showSearch: false
    };

    handleSearch = e => {
        this.setState({
            filterText: e.target.value.toLowerCase()
        })
    };

    handleShowSearch = e => {
        this.setState({
            showSearch: !this.state.showSearch,
            filterText: ''
        })
    };

    render() {
        let table = [];
        let lastCategory = null;

        allCars.filter( el => {
            if (el.name.toLowerCase().indexOf(this.state.filterText) === -1){
                return null;
            }
            if (el.vin !== lastCategory){
                table.push(
                    <a className='search_items_links' onClick={()=> {this.handleShowSearch();}} key={el.vin} >
                        <div className='search_items'>{el.name}</div>
                    </a>
                )
            }

            lastCategory = el.vin;
        });

        let addClassSearch = this.state.filterText.length > 0 ? "search search_active" : "search";
        let toggleClassX = this.state.filterText.length > 0 ? "search_close search_close_active" : "search_close";

        if (this.state.showSearch === true){
            return (
                <>
                    <div className={addClassSearch}>
                        <input autoFocus
                               type='text'
                               placeholder='search'
                               value={this.state.filterText}
                               onChange={this.handleSearch}
                        />
                        <div onClick={this.handleShowSearch} className={toggleClassX}>
                            <img src='../images/close.png'/>
                        </div>
                        <div className='search_list'>
                            {
                                this.state.filterText.length === 1 && <a className='search_items_links'><div className='search_items'>Too short...</div></a> ||
                                this.state.filterText.length > 1 && table
                            }
                        </div>
                    </div>
                </>
            )
        } else{
            return (
                <div className='search_icon_display'>
                    <div className='search_zoom-icon'><img onClick={this.handleShowSearch}
                                                           onMouseEnter={this.hoverIcon}
                                                           onMouseOut={this.hoverIcon}
                                                           src={this.state.hoverIcon ? '../images/search-icon_hover.png' : '../images/search-icon.png'}/></div>
                </div>

            )
        }


    }
}

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
类SearchCars扩展组件{
const allCars=[
{name:CarA，vin:exampleVin1}，
{名称：CarB，vin:exampleVin2}
]
状态={
筛选器文本：“”，
showSearch:false
};
handleSearch=e=>{
这是我的国家({
filterText:e.target.value.toLowerCase（）
})
};
handleShowSearch=e=>{
这是我的国家({
showSearch:！this.state.showSearch，
筛选器文本：“”
})
};
render（）{
设table=[]；
设lastCategory=null；
allCars.filter（el=>{
if（el.name.toLowerCase（）.indexOf（this.state.filterText）=-1）{
返回null；
}
如果（el.vin！==lastCategory）{
桌上推(
{this.handleShowSearch（）；}}}key={el.vin}>
{el.name}
)
}
lastCategory=el.vin；
});
让addClassSearch=this.state.filterText.length>0？“搜索搜索处于活动状态”：“搜索”；
让toggleClassX=this.state.filterText.length>0？“搜索\u关闭搜索\u关闭\u活动”：“搜索\u关闭”；
if（this.state.showSearch===true）{
返回(
{
this.state.filterText.length==1&太短||
this.state.filterText.length>1&&table
}
)
}否则{
返回(
)
}
}
}

我已经尝试过各种方法，例如：

   if (el.name.toLowerCase().indexOf(this.state.filterText) === -1){
                table.push(
                    <a className='search_items_links' onClick={()=> {this.handleShowSearch(); }} key={el.vin}}>
                        <div className='search_items'>Nothing was found</div>
                    </a>
                )
            }

if（el.name.toLowerCase（）.indexOf（this.state.filterText）=-1）{
桌上推(
{this.handleShowSearch（）；}}}key={el.vin}>
什么也没找到
)
}

但不幸的是，这两个信息似乎都没有找到任何东西，也没有找到一辆汽车。 我为我的英语感到抱歉，我请求帮助

import React, {Component} from "react";
import {Link} from "react-router-dom";

class SearchCars extends Component{

    const allCars = [
        {name: CarA, vin: exampleVin1},
        {name: CarB, vin: exampleVin2}
    ]

    state = {
        filterText: '',
        showSearch: false
    };

    handleSearch = e => {
        this.setState({
            filterText: e.target.value.toLowerCase()
        })
    };

    handleShowSearch = e => {
        this.setState({
            showSearch: !this.state.showSearch,
            filterText: ''
        })
    };

    render() {
        let table = [];
        let lastCategory = null;

        allCars.filter( el => {
            if (el.name.toLowerCase().indexOf(this.state.filterText) === -1){
                return null;
            }
            if (el.vin !== lastCategory){
                table.push(
                    <a className='search_items_links' onClick={()=> {this.handleShowSearch();}} key={el.vin} >
                        <div className='search_items'>{el.name}</div>
                    </a>
                )
            }

            lastCategory = el.vin;
        });

        let addClassSearch = this.state.filterText.length > 0 ? "search search_active" : "search";
        let toggleClassX = this.state.filterText.length > 0 ? "search_close search_close_active" : "search_close";

        if (this.state.showSearch === true){
            return (
                <>
                    <div className={addClassSearch}>
                        <input autoFocus
                               type='text'
                               placeholder='search'
                               value={this.state.filterText}
                               onChange={this.handleSearch}
                        />
                        <div onClick={this.handleShowSearch} className={toggleClassX}>
                            <img src='../images/close.png'/>
                        </div>
                        <div className='search_list'>
                            {
                                this.state.filterText.length === 1 && <a className='search_items_links'><div className='search_items'>Too short...</div></a> ||
                                this.state.filterText.length > 1 && table
                            }
                        </div>
                    </div>
                </>
            )
        } else{
            return (
                <div className='search_icon_display'>
                    <div className='search_zoom-icon'><img onClick={this.handleShowSearch}
                                                           onMouseEnter={this.hoverIcon}
                                                           onMouseOut={this.hoverIcon}
                                                           src={this.state.hoverIcon ? '../images/search-icon_hover.png' : '../images/search-icon.png'}/></div>
                </div>

            )
        }


    }
}