如何修复此问题以显示可变数量的菜单项?

huangapple go评论95阅读模式
英文:

How do I fix this to show a variable number of menuitems?

问题

以下是您提供的代码的翻译部分:

This is menu.js

  1. import React from "react";
  2. import MenuItem from "../MenuItem";
  3. export default class Menu extends React.Component {
  4. render() {
  5. return (
  6. <div>
  7. <h1>{this.props.menuName} 菜单</h1>
  8. <MenuItem {...this.props.menuItems[0]}></MenuItem>
  9. <MenuItem {...this.props.menuItems[1]}></MenuItem>
  10. <MenuItem>
  11. {this.props.menuItems.map((item) => <p>{item}</p>)}
  12. </MenuItem>
  13. </div>
  14. )
  15. }
  16. }

This is app.js

  1. import "./App.css";
  2. import MenuApp from "./components/MenuApp";
  3. function App() {
  4. let menuData = [
  5. {
  6. menuName: "晚餐",
  7. menuItems: [
  8. {
  9. itemId: 1,
  10. itemPrice: "12",
  11. itemName: "烤宽面条",
  12. itemDescription: "肉和奶酪层叠在自制宽面条之间,加入青椒和洋葱。",
  13. },
  14. {
  15. itemId: 2,
  16. itemPrice: "10",
  17. itemName: "芝士馄饨",
  18. itemDescription: "芝士馅的馄饨,搭配自制红酱。",
  19. },
  20. {
  21. itemId: 3,
  22. itemPrice: "14",
  23. itemName: "意大利炸鸡",
  24. itemDescription: "裹着意大利面酱和大量奶酪的面包屑炸鸡,配自制意大利面。",
  25. },
  26. ]
  27. }
  28. ];
  29. return (
  30. <div className="App">
  31. <MenuApp data={menuData}></MenuApp>
  32. </div>
  33. )
  34. }
  35. export default App

This is MenuApp.js

  1. import "../../App.css";
  2. import Menu from "../Menu";
  3. function MenuApp() {
  4. return (
  5. <div className="App">
  6. <Menu
  7. menuName="晚餐"
  8. menuItems={[
  9. {
  10. itemId: 1,
  11. itemPrice: "12",
  12. itemName: "烤宽面条",
  13. itemDescription: "肉和奶酪层叠在自制宽面条之间,加入青椒和洋葱。",
  14. },
  15. {
  16. itemId: 2,
  17. itemPrice: "10",
  18. itemName: "芝士馄饨",
  19. itemDescription: "芝士馅的馄饨,搭配自制红酱。",
  20. },
  21. {
  22. itemId: 3,
  23. itemPrice: "14",
  24. itemName: "意大利炸鸡",
  25. itemDescription: "裹着意大利面酱和大量奶酪的面包屑炸鸡,配自制意大利面。",
  26. }
  27. ]}
  28. ></Menu>
  29. </div>
  30. )
  31. }
  32. export default MenuApp

This is MenuItem.js

  1. import React from "react";
  2. export default class MenuItem extends React.Component {
  3. render() {
  4. return (
  5. <div>
  6. <span>${this.props.itemPrice}</span>
  7. <h2>{this.props.itemName}</h2>
  8. <p>{this.props.itemDescription}</p>
  9. <button>Add to Cart</button>
  10. </div>
  11. );
  12. }
  13. }

请注意,您提供的代码中包含一些 HTML 实体编码(如 &quot;&lt;),这些在翻译时已被还原为相应的字符。

英文:

I have this basic example, and I can see each menuitem by subscript, but the .map formation is failing. The following is the code. I am using a PDF to create this to help myself learn React.js, but the PDF is unclear. Can I attach the PDF?

This is menu.js

  1. import React from &quot;react&quot;
  2. import MenuItem from &quot;../MenuItem&quot;
  3. export default class Menu extends React.Component {
  4. render() {
  5. return (
  6. &lt;div&gt;&lt;h1&gt;{this.props.menuName} Menu&lt;/h1&gt;
  7. &lt;MenuItem {...this.props.menuItems[0]}&gt;&lt;/MenuItem&gt;
  8. &lt;MenuItem {...this.props.menuItems[1]}&gt;&lt;/MenuItem&gt;
  9. &lt;MenuItem {...this.props.menuItems.map((item) =&gt; &lt;p&gt;item&lt;/p&gt;)}&gt;&lt;/MenuItem&gt;
  10. &lt;/div&gt;
  11. )
  12. }

This is app.js

  1. import &quot;./App.css&quot;
  2. import MenuApp from &quot;./components/MenuApp&quot;
  3. // let data = {...} (include the data array from above).
  4. function App() {
  5. let menuData = [
  6. {
  7. menuName: &quot;Dinner&quot;,
  8. menuItems: [
  9. {
  10. itemId: 1,
  11. itemPrice: &quot;12&quot;,
  12. itemName: &quot;Lasagne&quot;,
  13. itemDescription:
  14. &quot;Meat and cheese layered between house-made pasta with bell peppers and onions.&quot;,
  15. },
  16. {
  17. itemId: 2,
  18. itemPrice: &quot;10&quot;,
  19. itemName: &quot;Cheese Ravioli&quot;,
  20. itemDescription: &quot;Cheese-filled ravioli served with house red sauce.&quot;,
  21. },
  22. {
  23. itemId: 3,
  24. itemPrice: &quot;14&quot;,
  25. itemName: &quot;Chicken Parmesan&quot;,
  26. itemDescription:
  27. &quot;Breaded chicken topped with marinara sauce and lots of cheese served over house made spaghetti.&quot;,
  28. },
  29. ]
  30. }]
  31. return (
  32. &lt;div className=&quot;App&quot;&gt;
  33. &lt;MenuApp data={menuData}&gt;&lt;/MenuApp&gt;
  34. &lt;/div&gt;
  35. )
  36. }
  37. export default App

This is MenuApp.js

  1. import &quot;../../App.css&quot;
  2. import Menu from &quot;../Menu&quot;
  3. function MenuApp() {
  4. return (
  5. &lt;div className=&quot;App&quot;&gt;
  6. &lt;Menu
  7. menuName=&quot;Dinner&quot;
  8. menuItems={[
  9. {
  10. itemId: 1,
  11. itemPrice: &quot;12&quot;,
  12. itemName: &quot;Lasagne&quot;,
  13. itemDescription:
  14. &quot;Meat and cheese layered between house-made pasta with bell peppers and onions.&quot;,
  15. },
  16. {
  17. itemId: 2,
  18. itemPrice: &quot;10&quot;,
  19. itemName: &quot;Cheese Ravioli&quot;,
  20. itemDescription: &quot;Cheese-filled ravioli served with house red sauce.&quot;,
  21. },
  22. {
  23. itemId: 3,
  24. itemPrice: &quot;14&quot;,
  25. itemName: &quot;Chicken Parmesan&quot;,
  26. itemDescription:
  27. &quot;Breaded chicken topped with marinara sauce and lots of cheese served over house made spaghetti.&quot;,
  28. },
  29. ]}
  30. &gt;&lt;/Menu&gt;
  31. &lt;/div&gt;
  32. )
  33. }
  34. export default MenuApp

This is MenuItem.js

  1. import React from &quot;react&quot;
  2. export default class MenuItem extends React.Component {
  3. render() {
  4. return (
  5. &lt;div&gt;
  6. &lt;span&gt;${this.props.itemPrice}&lt;/span&gt;
  7. &lt;h2&gt;{this.props.itemName}&lt;/h2&gt;
  8. &lt;p&gt;{this.props.itemDescription}&lt;/p&gt;
  9. &lt;button&gt;Add to Cart&lt;/button&gt;
  10. &lt;/div&gt;
  11. );
  12. }
  13. }

答案1

得分: 1

看起来你正在尝试渲染不同数量的<MenuItem />组件,如果是这样的话,请在Menu.js中尝试以下代码。

  1. import React from "react";
  2. import MenuItem from "../MenuItem";
  3. export default class Menu extends React.Component {
  4. render() {
  5. return (
  6. <div>
  7. <h1>{this.props.menuName} 菜单</h1>
  8. {this.props.menuItems.map((item) => (
  9. <MenuItem {...item} />
  10. )}
  11. </div>
  12. );
  13. }
  14. }
英文:

It seems you are trying to render a variable number of &lt;MenuItem /&gt; components, in which case please try the below in Menu.js.

<!-- language: lang-js -->

  1. import React from &quot;react&quot;;
  2. import MenuItem from &quot;../MenuItem&quot;;
  3. export default class Menu extends React.Component {
  4. render() {
  5. return (
  6. &lt;div&gt;
  7. &lt;h1&gt;{this.props.menuName} Menu&lt;/h1&gt;
  8. {this.props.menuItems.map((item) =&gt; (
  9. &lt;MenuItem {...item} /&gt;
  10. ))}
  11. &lt;/div&gt;
  12. );
  13. }
  14. }

答案2

得分: 0

以下是您要翻译的内容:

  1. 检查确保您实际将 menuItems 作为属性传递给 Menu 组件,如果未定义,它将引发 TypeError: 无法访问未定义的属性 "map"
  2. 看了代码两次,我注意到您正在解构 this.props.menuItems.map((item) => &lt;p&gt;item&lt;/p&gt;) 的结果,这会导致错误的映射。

根据您的 ECMAScript 版本,可以将此行替换为以下形式。

  1. {this.props.menuItems?.map((item) => &lt;p&gt;item&lt;/p&gt;)}
英文:

There can be at least two problems here that are directly linked with what you might get.

  1. Check that you are in fact passing menuItems as a property to Menu component, if it is undefined it will throw TypeError: can&#39;t access property &quot;map&quot; of undefined
  2. Looking twice at the code, I noticed that you a de-structuring the result of
    this.props.menuItems.map((item) =&gt; &lt;p&gt;item&lt;/p&gt;) which would result in an incorrect mapping.

Depending on your ECMAScript version, replacing this line as-is would do.

  1. {this.props.menuItems?.map((item) =&gt; &lt;p&gt;item&lt;/p&gt;)}

huangapple
  • 本文由 发表于 2023年2月10日 06:32:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75405128.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定