javascript - 如何隐藏没有产品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
        }
    }

    

对于上面的组件，下面的图像是输出
image link
当品牌出现在该特定类别下时，我只想显示字符
我该如何解决？
我希望我的页面看起来像这样 [如链接中所示][2]

Answer 1

您应该检查 brandsByCharacter返回前 getBrands :

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;
    }
  };