如何根据reactjs中点击的字母过滤数据

问题描述

我有一组从 A 到 Z 的按钮，当我点击某个特定字母时，包含该字母的品牌应显示为 link 中所示。我创建了一个数组并在名为 brandSortData 的变量中设置所有值的状态，如下面的代码

createBrandsMapData(){
    let brandData = {}
    brandList.map((key) => {
        brandData[key] = this.state.items.filter((currentValue) => {if(currentValue.value[0] === key) return currentValue}) 
    })
    this.setState({
        allBrands: brandData,brandSortData: brandData
    })
}

我在下面handleClick()下面有这个

handleClick = event =>{
    const brandValues = event.target.value
    if(event.target.value === "all"){
        return this.getBrands()
    }
    else{
        console.log(this.state.brandSortData)
        let brandSortDataByCharacter = this.state.brandSortData.filter((currentCharacter) => {if(currentCharacter.value[0] === brandValues) return currentCharacter})
        return brandSortDataByCharacter
    }
}

我在 filter() 中收到错误，如 Uncaught TypeError: _this.state.brandSortData.filter is not a function。我有这个 getBrandSortData() 生成按钮的地方

getBrandSortData(){
    return(
        <div className="BrandPagelist_AlphabetContainer">
            <button value="all" className="BrandPagelist_AllButton" onClick={this.handleClick}>All</button>
            {brandList.map((item,index) => 
                <button value={item} key={index} className="BrandPagelist_AlphabetButtons" onClick={this.handleClick}>{item}</button>
            )}
        </div>
    )
}

我如何解决这个问题我被困在这里。这是 brandData 的格式，如图像

解决方法

您在 brandSortData 状态下存储对象，这就是您面临错误的原因。

因此，要么将其更改为存储数组，要么更改您的 handleClick 函数，如下所示：

handleClick = event =>{
    const brandValues = event.target.value
    if(brandValues === "all"){
        return this.getBrands()
    }
    else{
        let brandSortDataByCharacter = this.state.brandSortData[brandValues]
        return brandSortDataByCharacter
    }
}