如何在 ReactJS 中渲染数组？

Question

我知道有很多错误，我需要有人帮我解决这个问题 fix/explain。我正在尝试制作一个食品订购应用程序，我需要呈现一组对象。 ps。我是 ReactJS 的新手，这是我的第一份工作。

这是我得到的错误代码： [截图在页尾][1] 我需要在组件中呈现这些对象，以便将其导出到我的主应用程序。我希望有人能帮助我。

import './css/foa-navigation.css';

const DUMMY_MEALS = [
    {
      id: 'm1',
      name: 'Triple B',
      description: 'Triple B burger for extreme meat lovers to feel the taste of 480 g (160 g x 3) charcoal grilled gourmet meat with melted cheese, lettuce and sauce in 4.5" ban.',
      price: 75,
    },
    {
      id: 'm2',
      name: 'Pina Colada',
      description: 'Charcoal grilled gourmet beef patty with pineapple, bacon, white cheese & pina colada sauce.',
      price: 44,
    },
    {
      id: 'm3',
      name: 'Mushroom Burger',
      description: 'Charcoal grilled gourmet beef patty with homemade pickles, mayo, Cheddar cheese, fresh mushrooms & rich homemade mushroom sauce',
      price: 44,
    },
    {
      id: 'm4',
      name: 'Mexican Burger',
      description: 'Charcoal grilled gourmet beef patty with homemade pickles, mayo, jalapeno, Emmental cheese & Mexican sauce.',
      price: 44,
    },
    {
      id: 'm5',
      name: 'Lads 70’s B',
      description: 'Charcoal grilled gourmet beef patty, homemade pickles, fresh mushrooms, grilled onions, egg, Cheddar & mozzarella cheese.',
      price: 44,
    },
    {
      id: 'm6',
      name: 'Hot Dog',
      description: '-',
      price: 28,
    },
    {
      id: 'm7',
      name: 'Double B',
      description: 'Double taste for meat lovers! 320 g (160 g x 2) of charcoal grilled patty with double cheese, lettuce and sauce in 4.5" ban.',
      price: 55,
    },
    {
      id: 'm8',
      name: 'Classic Burger',
      description: 'Charcoal grilled gourmet beef patty with iceberg lettuce, tomatoes, homemade pickles, onions, Cheddar cheese & chef’s sauce.',
      price: 39,
    },
    {
      id: 'm9',
      name: 'Big Lads',
      description: 'Charcoal grilled gourmet beef patty with iceberg lettuce, tomatoes, onions, mango, avocado, bacon, beetroot, mayo & white cheese.',
      price: 55,
    },
  ];

  const Card = () => {
    const mealsList = DUMMY_MEALS.map((meal) => (
      <MealItems
        key={meal.id}
        id={meal.id}
        name={meal.name}
        description={meal.description}
        price={meal.price}
      />
    ));
  
const MealItems = (props) => {
    <div className="col-md-4">
                <div className="item-add">
                  <div className="product_header">
                    <div className="product_name">
                      <span className="item-heading">{props.name}</span>
                    </div>
                  </div>
                  <div className="product_price">
                    <span className="item-price">
                    {props.price}<span> $</span>
                    </span>
                  </div>
                  <div className="product_description">
                  {props.description}{" "}
                  </div>
                </div>
              </div>

}
return (
      <div>
        <ul>{mealsList}</ul>
      </div>
  );
}
export default Card;```


  [1]: https://i.stack.imgur.com/g95BF.png
  [2]: https://i.stack.imgur.com/vZMR3.png

Answer 1

如果您准备进行重构，那么我建议您按照以下方式重构组件。我仍然希望 MealItems 位于其自己的单独文件中。

const MealItems = (props) => (
  <div className="col-md-4">
    <div className="item-add">
      <div className="product_header">
        <div className="product_name">
          <span className="item-heading">{props.name}</span>
        </div>
      </div>
      <div className="product_price">
        <span className="item-price">
          {props.price}
          <span> $</span>
        </span>
      </div>
      <div className="product_description">{props.description} </div>
    </div>
  </div>
);

const Card = () => {
  return (
    <div>
      <ul>
        {DUMMY_MEALS.map((meal) => (
          <MealItems
            key={meal.id}
            id={meal.id}
            name={meal.name}
            description={meal.description}
            price={meal.price}
          />
        ))}
      </ul>
    </div>
  );
};

export default Card;

如何在 ReactJS 中渲染数组？

How to render an Array in ReactJS?

arrays

rendering

render

reactjs