javascript - 无法使用 reactjs 中的嵌套 map() 和 useEffect() 以正确的顺序呈现产品

Question

我正在尝试使用 Reactjs 构建一个餐厅网络应用程序。我有父类别、子类别和子类别下的产品，我正在尝试构建一个带有选项卡的 UI，我可以在其中显示父类别-单击显示子类别并以正确的顺序显示该子类别下的产品。单击父项时，我得到了子类别，但没有按预期获得产品。我想呈现像这样的产品 Burger Show all the burgers Sandwich show all the sandwich, swarma 显示所有的锯齿，但我只在我应该按正确顺序获得所有产品的地方得到 swarmas。请帮我把产品按正确的顺序排列。这是我的 Menu.js

    import React, { useEffect } from "react";
import MenuItems from "./MenuItems";
import "./testmenu.css";
// import burger from "../images/burger.jpg";
// import cake from "../images/cake-2.jpeg";
//Bootsrap
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";
//REDUX
import { useSelector, useDispatch } from "react-redux";
import { getAllCategory } from "../actions";
import { Fragment } from "react";

const TestMenu = () => {
  //GET ALL CATEGORIES WHEN RENDERED
  const category = useSelector((state) => state.category);
  console.log(category);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getAllCategory());
  }, [dispatch]);

  const renderParentCategories = (categories) => {
    let parentCategories = [];
    for (let category of categories) {
      parentCategories.push(
        <Nav.Item key={category.name}>
          <Nav.Link eventKey={category.name}>{category.name}</Nav.Link>
        </Nav.Item>
      );
    }
    return parentCategories;
  };
  const renderChildrenCategories = (categories) => {
    console.log(categories);
    return categories.map((category, i) => (
      <Tab.Pane key={i} eventKey={category.name}>
        {category.children.map((cat, i) => (
          <Fragment key={i}>
            <h2>{cat.name}</h2>
            <Row>{<MenuItems slug={cat.slug} />}</Row>
          </Fragment>
        ))}
      </Tab.Pane>
    ));
  };

  //CALLING THE LIST OF THE ITEMS
  return (
    <div className="Collections">
      <Container>
        <Tab.Container defaultActiveKey="first">
          <Row>
            <Col>
              <Nav className="d-flex flex-row justify-content-center text-center">
                {category.categories.length > 0
                  ? renderParentCategories(category.categories)
                  : null}
              </Nav>
            </Col>
          </Row>
          <Row>
            <Col>
              <Tab.Content>
                {category.categories.length > 0
                  ? renderChildrenCategories(category.categories)
                  : null}
              </Tab.Content>
            </Col>
          </Row>
        </Tab.Container>
      </Container>
    </div>
  );
};

export default TestMenu;

这是我的 MenuItems.js 文件：

    import React, { useEffect } from "react";
import { Button, ButtonGroup, Col } from "react-bootstrap";
import { useDispatch, useSelector } from "react-redux";
import { addToCart, getProductsBySlug } from "../actions";
import { generatePublicUrl } from "../urlConfig";

const MenuItems = ({ slug }) => {
  const product = useSelector((state) => state.product);
  const dispatch = useDispatch();
  console.log(product);

  useEffect(() => {
    dispatch(getProductsBySlug(slug));
  }, [dispatch, slug]);

  return product.products.map((product, i) => (
    <Col key={i} xs={6} md={3} lg={3} xl={3}>
      <div className="menuitem">
        <div className="images">
          <img
            className="image"
            src={generatePublicUrl(product.productPictures[0].img)}
            alt="img"
          />
          <div className="menuitem__buttons">
            <ButtonGroup size="sm">
              {/* onClick={props.itemInfo} */}
              <Button variant="info">
                <i className="fa fa-info-circle" aria-hidden="true" />
                Info
              </Button>
              {/* onClick={props.addItem} */}
              <Button
                variant="success"
                onClick={() => {
                  const { _id, name, price } = product;
                  const img = product.productPictures[0].img;
                  // console.log(_id, name, price, img);
                  dispatch(addToCart( _id, name, price, img ));
                }}
              >
                <i className="fas fa-shopping-cart" />
                Add
              </Button>
            </ButtonGroup>
          </div>
          <span className="images__h3">
            <h5 style={{ textAlign: "center" }}>{product.name}</h5>
            <h5
              style={{
                color: "green",
                textAlign: "center",
                fontSize: "16px",
              }}
            >
              Price: {product.price}tk
            </h5>
          </span>
        </div>
      </div>
    </Col>
  ));
};

export default MenuItems;

这是控制台：

这是我得到的结果：

标签： javascriptnode.jsreactjstwitter-bootstrapreact-bootstrap