如何解决如何根据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
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。