Question

我有一个产品列表，该列表分为类别和子类别。

我通过以下方式来填充它们：从道具创建一个组，检查该组中是否包含任何子组并将其添加到下面，最后根据它们所在的组用产品填充组。

  const SideBarMenu = props => {
  const groups = props.groups;
  const products = props.products;
  const handleClick = props.handleClick;

  const AddGroup = group => {

    return (
      <SubMenu
        key={"group-id-" + group.id}
        title={
          <span>
            <Icon type="appstore" />
            <span>{group.name}</span>
          </span>
        }
      >
        {group.subGroups.length
          ? group.subGroups.map(subGroup => AddGroup(subGroup))
          : null}
        {products
          ? products
              .filter(product => product.groupID === Number(group.id))
              .map(product => AddMenuItem(product))
          : null}
      </SubMenu>
    );
  };

  // TODO: Add "empty item warning" in empty groups?
  const AddEmptyMenuItem = () => {
    return <Menu.ItemGroup title="There appears to be nothing here"></Menu.ItemGroup>
  }

  const AddMenuItem = product => {
    return <Menu.Item key={product.productID}>{product.name}</Menu.Item>;
  };

  return (
    <Menu triggerSubMenuAction="click" id="sidebar-menu" onClick={handleClick} mode="inline" selectable>
      {groups ? groups.map(group => AddGroup(group)) : null}
    </Menu>
  );
};

现在我要做的是，渲染一个AddEmptyMenuItem元素，该元素可以进入没有产品的任何组，只是为了增加用户体验。

我的问题是，无论我如何努力尝试filter方法，它都对我不起作用

我将如何检查过滤器是否返回任何结果，如果返回，则调用AddMenuItem(product)，如果最后没有找到满足上述条件的结果，则调用AddEmptyMenuItem？ >

Answer 1

使用函数返回所需的数组，而不是在jsx中处理大量的计算。

{calibrateProductStatus(products)}

calibrateProductStatus = (products) => { 
    if(products.length){
        let filteredProducts = products.filter(product => product.groupID === Number(group.id));
        return filteredProducts.length? filteredProducts.map(product => AddMenuItem(product)) : AddEmptyMenuItem()
    } else return null;
}

React-数组if-else过滤器

1 个答案: