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

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";
  4. function App() {
  5.   let menuData = [
  6.     {
  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.     }
  29.   ];
  31.   return (
  32.     <div className="App">
  33.       <MenuApp data={menuData}></MenuApp>
  34.     </div>
  35.   )
  36. }
  38. export default App

This is MenuApp.js

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

This is MenuItem.js

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

请注意，您提供的代码中包含一些 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.         },
  30.         ]}
  31.       &gt;&lt;/Menu&gt;
  32.     &lt;/div&gt;
  33.   )
  34. }
  35. 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";
  4. export default class Menu extends React.Component {
  5.   render() {
  6.     return (
  7.       <div>
  8.         <h1>{this.props.menuName} 菜单</h1>
  9.         {this.props.menuItems.map((item) => (
  10.           <MenuItem {...item} />
  11.         )}
  12.       </div>
  13.     );
  14.   }
  15. }
英文:

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;;
  4. export default class Menu extends React.Component {
  5.   render() {
  6.     return (
  7.       &lt;div&gt;
  8.         &lt;h1&gt;{this.props.menuName} Menu&lt;/h1&gt;
  9.         {this.props.menuItems.map((item) =&gt; (
  10.           &lt;MenuItem {...item} /&gt;
  11.         ))}
  12.       &lt;/div&gt;
  13.     );
  14.   }
  15. }

答案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
  • javascript
  • reactjs
匿名

发表评论

匿名网友

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

确定