Javascript 基于道具类型的渲染组件

我有一个小餐馆应用程序，用户可以从菜单上点菜。菜单有三种：食物、饮料、甜点。组件结构自上而下为订单->菜单->菜单项。我想根据类型分开菜单页面示例：所有食物项目都在一个名为food等的标题下。现在，菜单组件从Order接收菜单数组作为道具，并为数组中的每个项目呈现MenuItem。每个项都有一个名为type的属性。为了简洁起见，我省略了与此问题无关的代码的某些部分

//命令

export default function Order() {
  const [menu, setMenu] = useState<Array<{}>>([]);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    apiFetch("menu").then((json) => setMenu(json.menu));
  }, []);


  async function handleSubmit(e: any) {
    e.preventDefault();
    const selectedItems = getSelectedItems(TotalStore);
    apiFetch("order", "post", { selectedItems })
      .then((json) => {
        alert("Order has been submitted");
        setTotal(0);
        TotalStore.reset();
        localStorage.setItem("last_order_id", json.order.id);

        function checkOrderStatus() {
          apiFetch(
            `order/${json.order.id || localStorage.getItem("last_order_id")}`
          ).then((placedOrder) => {
            const { order } = placedOrder;
            if (order[0].status === 2) {
              alert("Your order is ready!");
            } else {
              setTimeout(checkOrderStatus, 5000);
            }
          });
        }
        checkOrderStatus();
      })
      .catch((error) => {
        alert("Server error");
      });
  }

  function orderPlaced(total: number) {
    return total !== 0 ? true : false;
  }

  return (
    <div>
      {menu.length > 0 ? (
        <>
          <div className="menu">
            <div className="menu-title">Food Menu</div>
            <form id="menu-form" onSubmit={handleSubmit} autoComplete="off">
              <Menu onChange={itemChanged} props={menu} />
              <button type="submit" disabled={!orderPlaced(total)}>
                Place Order
              </button>
            </form>
          </div>
          <div className="order-total">
            <h2>
              Total: $<span>{total.toFixed(2)}</span>
            </h2>
          </div>
        </>
      ) : (
        <>Loading Menu</>
      )}
    </div>
  );
}

//菜单

export default function Menu({ onChange, props }: MenuProps) {
  return (
    <div>
      {props.map((food: any, index: number) => {
        return (
          <MenuItem
            key={index}
            onChange={onChange}
            type={food.type}
            item={food}
          />
        );
      })}
    </div>
  );
}

//梅努伊特姆

export default function MenuItem({ onChange, item, type }: MenuItemProps) {

  return (
    <div>
      <article className="menu-item" data-item-type={type}>
        <h3 className="item-name">{item.name}</h3>
        <input
          type="number"
          className="menu-item-count"
          min="0"
          value={data.count}
          onChange={menuItemCountChange}
        />
        <strong className="item-price">${item.price.toFixed(2)}</strong>
      </article>
    </div>
  );
}

以下是页面当前的外观：

---

您想按food.type属性对菜单数据进行分组。一种方法是将菜单项按其食物类型分类，然后分别呈现每组

export default function Menu({ onChange, items }) {
  const foodCategories = items.reduce((categories, item) => {
    if (!categories[item.type]) {
      categories[item.type] = []; // <-- new array for category type
    }
    categories[item.type].push(item); // <-- push item into category type
    return categories;
  }, {});

  return (
    <div>
      {Object.entries(foodCategories).map(([type, foodItems]) => (
        <div key={type}>
          <h1>{type}</h1> // <-- category header
          {foodItems.map((food, index) => ( // <-- map food items
            <MenuItem
              key={index}
              onChange={onChange}
              type={food.type}
              item={food}
            />
          ))}
        <div>
      ))}
    </div>
  );
}

---

是否要对列表中的某些项目进行分组？不太确定我是否理解您的问题。请使用和使用props.filter之类的工具来筛选您正在显示的菜单项。是否要按food.type对象属性分组？或者arrray.将菜单项减少到其预期的食物类型类别数组中？你的要求模棱两可。您能否澄清并提供所需的行为/输出？是的，我想根据菜单项的类型对其进行分组。如果你现在看这一页，没有任何东西可以把食物和饮料和甜点分开。我想用一个或某种标记来分隔每个组，但由于我只有MenuItem来呈现所有菜单项，所以我不确定如何进行。我不确定此处不清楚的部分：任何普通菜单都有部分。在“食物”下，您将找到所有食物选项。在饮料下面，你可以找到饮料。在甜点下面你会找到甜点。我附上的屏幕截图清楚地显示菜单中没有这样的部分。问题是如何呈现相应部分下的菜单项。该部分可以是一个类似于。这是否太模糊或不清楚？