如何隐藏没有产品reactjs的字符

Question

我有一个品牌列表页面，其中品牌显示在每个字母表下。现在有些字母表没有任何品牌。如何使那些不显示字母表。我有下面的代码，并尝试

getBrands = () => {
if(this.isBrandsAvailable()){
return  brandList.map((key) => {
return(
<div>
<div>
{key}
</div>
<div>
{this.renderBrandDetails(this.getBrandsByCharacter(key))}
</div>
</div>
)
}) 
}
else{
return null
}
}

对于上面的组件，下面的图像是输出

图像链接

我只想在特定类别下出现品牌时显示字符

我该如何解决？

我希望我的页面看起来像这样[如链接中所示][2]

Answer 1

在返回getBrands:之前，您应该检查brandsByCharacter

getBrands = () => {
if (this.isBrandsAvailable()) {
return brandList.map((key) => {
const brandsByCharacter = this.getBrandsByCharacter(key);
if (brandsByCharacter?.length > 0) {
return (
<div>
<div>{key}</div>
<div>
{this.renderBrandDetails(brandsByCharacter)}
</div>
</div>
);
}
return null;
});
} else {
return null;
}
};

Answer 2

您必须将此brandList缩减为仅具有可用品牌的阵列

getBrands = () => {
if (this.isBrandsAvailable()) {
return brandList.reduce((acc, key) => {
const brand = this.getBrandsByCharacter(key);
if (brand) {
return [
...acc,
{
key,
rendered: this.renderBrandDetails(brand)
}
];
}
}, []);
} else {
return null;
}
};