상태에 따라 반응 페이지에 동적으로 구성 요소 추가

그래서 Udemy를 ​​통해 반응을 배우고 있으며 강사는 상태를 사용하여 햄버거 재료의 내용을 동적으로 렌더링하기 위해이 코드를 작성했습니다. 기본적으로 그는 상태 객체를 배열로 변환하고이를 사용하여 물건을 렌더링합니다.

import React from "react";
import classes from "./Burger.css";
import BurgerIngredient from "./BurgerIngredients/BurgerIngr";

const burger = (props) => {
  const transformedIngr = Object.keys(props.ingredients).map((igKey) => {
    return [...Array(props.ingredients[igKey])].map((_, i) => {
      return <BurgerIngredient key={igKey + i} type={igKey} />;
    });
  });

  return (
    <div className={classes.Burger}>
      <BurgerIngredient type="bread-top" />
      {transformedIngr}
      <BurgerIngredient type="bread-bottom" />
    </div>
  );
};

export default burger;

//Object.entries(props.ingredients).map((indexOne, indexTwo)

코드가 매우 복잡해 보이며 동일한 비디오를 여러 번 보아도 이해할 수 없습니다. 내 말은, 온라인에서 조사한 결과 다음을 사용하여 객체를 배열로 변환하는 더 좋은 방법이 있음을 알았습니다.

Object.entries(props.ingredients)

누구든지 기존 코드를 설명 할 수 있습니까 ? Object.entries 를 사용하여 더 쉽게 만들 수 있습니까? 또는 동일한 작업을 수행하는 다른 대체 방법이 있습니까?

BurgerBuilder.js

import React, { Component } from "react";
import Aux from "../../hoc/aux";
import Burger from "../../components/Burger/Burger";

class BurgerBuilder extends Component {
  state = {
    ingredients: {
      meat: 1,
      salad: 2,
      cheese: 1,
      bacon: 1,
    },
  };

  render() {
    return (
      <Aux>
        <Burger ingredients={this.state.ingredients} />
        <div>Controls</div>
      </Aux>
    );
  }
}

기본 BurgerBuilder 내보내기;

BurgerIngriedent.js

import React, { Component } from "react";
import Classes from "./original.css";
import PropTypes from "prop-types";

class BurgerIngredients extends Component {
  render() {
    let ingredient = null;

    switch (this.props.type) {
      case "bread-bottom":
        ingredient = <div className={Classes.BreadBottom}></div>;
        break;
      case "bread-top":
        ingredient = (
          <div className={Classes.BreadTop}>
            <div className={Classes.Seeds1}></div>;
            <div className={Classes.Seeds2}></div>;
          </div>
        );
        break;
      case "meat":
        ingredient = <div className={Classes.Meat}></div>;
        break;
      case "salad":
        ingredient = <div className={Classes.Salad}></div>;
        break;
      case "cheese":
        ingredient = <div className={Classes.Cheese}></div>;
        break;
      case "bacon":
        ingredient = <div className={Classes.Bacon}></div>;
        break;
      default:
        ingredient = null;
        break;
    }
    return ingredient;
  }
}

BurgerIngredients.propTypes = {
  type: PropTypes.string.isRequired,
};

export default BurgerIngredients;

감사합니다.