Question

我有一个组件可以从端点获取品牌数据，并且我尝试实现搜索输入以过滤数据。

但是，如果我在不使用object.entries的情况下映射数据，但搜索效果很好，但是我需要使用object.entries进行映射，以生成品牌各部分的字母标题。

我在控制台中没有收到任何错误，也无法找出问题所在。

下面是我的组件

class Brands extends Component {
    constructor(props) {
        super(props);
        this.state = {
            searchInput: '',
        };
    }
    componentDidMount() {
        this.props.fetchbrandsData();
    }
    onSearchInputChange = (e) => {
        this.setState({ searchInput: e.target.value })
        console.log('working')
    }
    prepareAlphabets = () => {
        let result = [];
        for (let i = 65; i < 91; i++) {
            result.push(
                <a href={'#' + String.fromCharCode(i)} key={i} value={String.fromCharCode(i)} >{String.fromCharCode(i)}</a>
            )
        }
        return result;
    }
    elementContainsSearchString = (searchInput, element) => (searchInput ? element.name.toLowerCase().includes(searchInput.toLowerCase()) : false);

    // Fallback brand image

    nobrandimage(image) {
        image.target.src = '../images/no_image.jpg'
    }

    filterItems = (itemList) => {
        let result = [];
        const { searchInput, alphabet } = this.state;
        let brands = this.props.brands.all_brands
        if (brands) { } else {
            return 'loading...'
        }
        if (itemList && (searchInput)) {
            result = itemList.filter((element) => (element.name.charAt(0).toLowerCase()) ||
                this.elementContainsSearchString(searchInput, element));
        } else {
            result = itemList || [];
        }
        const groups = brands.reduce((groups, brand) => {
            const letterKey = brand.name.charAt(0).toUpperCase();
            (groups[letterKey] || (groups[letterKey] = [])).push(brand);
            return groups;
        }, {});
        result = Object.entries(groups).sort().map(([letterKey, brands, index]) => (
            <div key={letterKey} className="no-padding brand-items col-md-12">
                <h4 id={letterKey}>{letterKey}</h4>
                <ul>
                    {brands.map(brand => <li key={index} className="brand-item"><a href="#"><img key={index} id={brand.name} onError={this.nobrandimage} src={brand.thumbnail} className="img-responsive" /></a><strong>{brand.name}</strong></li>)}
                </ul>
            </div>
        ));
        return result;
    }

    render() {
        let brands = this.props.brands.all_brands
        const filteredList = this.filterItems(brands);
        if (brands) { } else {
            return 'loading...'
        }

        return (
            <div className="container no-padding">
                <div className="row">
                    <div className="widget-title page-title col-md-12 p-l-0">
                        <h2 className="pull-left">Brands<span className="toolbar-number">( Showing {brands.length} results ) </span></h2>
                        <input type="search" onChange={this.onSearchInputChange} className="pull-right" placeholder="Search by Brand" />
                    </div>
                </div>
                <div className="row alplhabet-grid">
                    <a href="#A" className="btn-all-celebrities"> All Brands </a>
                    {this.prepareAlphabets()}
                </div>

                <div className="row brand-grid">
                    {filteredList}
                </div>
            </div>
        );
    }

}

下面是我的JSON格式

{
    "all_brands": [
        {
            "name": "Talika",
            "thumbnail": "ss1.png",
        },
        {
            "name": "La Sultane De Saba",
            "thumbnail": "Serge-Louise-Alvarez.png",
        }
    ]
}

Answer 1

在此表达式index中将始终是未定义的：

Object.entries(groups).sort().map(([letterKey, brands, index]) => ...

以这种方式更正您的代码：

Object.entries(groups).sort().map(([letterKey, brands], index) => ...

搜索过滤器在与对象条目映射时无法在Reactjs中工作

1 个答案: