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

Question

当我单击特定字母表时，我有一组从 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 的格式，如图所示

Answer 1

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

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

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