JS Map 混淆

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

JS Map confusion

问题

尝试从数组获取数据，收到错误。我已将数据传递到组件并访问披萨的数据，该数据是一个数组。请帮忙解决这个映射错误。我在映射中做错了什么？

  1. const mockJson = {
  2.     "pizza": [
  3.         {
  4.             "id": 0,
  5.             "name": "玛格丽特",
  6.             "description": "",
  7.             "ingredients": ["番茄酱", "奶酪"],
  8.             "spicy": false,
  9.             "vegetarian": true,
  10.             "price": 17.0,
  11.             "image": "https://i.imgur.com/8B8YLOo.jpg"
  12.         },
  13.         {
  14.             "id": 1,
  15.             "name": "意大利辣香肠",
  16.             "description": "",
  17.             "ingredients": ["番茄酱", "奶酪", "双层辣香肠"],
  18.             "spicy": false,
  19.             "vegetarian": false,
  20.             "price": 20.0,
  21.             "image": "https://i.imgur.com/OHHctnf.jpg"
  22.         }
  23.     ]
  24. }
  26. const RestaurantCard = (data) => {
  27.     console.log(data, 'data1') //数据可达
  28.     return (
  29.         <>
  30.             <div className="res-card">
  31.                 {console.log(helo, 'data2')}
  32.                 {data.pizza?.map((helo, id) => {
  33.                     return (
  34.                         <p key={id}>{helo.name}</p>
  35.                         <p key={id}>{helo.name}</p>
  36.                     )
  37.                 })}
  38.             </div>
  39.         </>
  40.     )
  41. }
  43. const Body = () => {
  44.     return (
  45.         <>
  46.             <div className="res-container"><RestaurantCard data={mockJson} /></div>
  47.         </>
  48.     )
  49. }
  51. 我无法获取 {helo.name}，我做错了什么？
英文:

Trying to get the data from Array, Received Error. I have passed data into the component
and accessing the data of pizza that is an Array. Please help to solve this mapping
Error. What doing wrong here in mapping ?

  1. const mockJson = {
  2. &quot;pizza&quot;: [
  3. {
  4. &quot;id&quot;: 0,
  5. &quot;name&quot;: &quot;Margherita&quot;,
  6. &quot;description&quot;: &quot;&quot;,
  7. &quot;ingredients&quot;: [&quot;tomato sauce&quot;, &quot;mozzarella&quot;],
  8. &quot;spicy&quot;: false,
  9. &quot;vegetarian&quot;: true,
  10. &quot;price&quot;: 17.0,
  11. &quot;image&quot;: &quot;https://i.imgur.com/8B8YLOo.jpg&quot;
  12. },
  13. {
  14. &quot;id&quot;: 1,
  15. &quot;name&quot;: &quot;Pepperoni&quot;,
  16. &quot;description&quot;: &quot;&quot;,
  17. &quot;ingredients&quot;: [&quot;tomato sauce&quot;, &quot;mozzarella&quot;, &quot;double pepperoni&quot;],
  18. &quot;spicy&quot;: false,
  19. &quot;vegetarian&quot;: false,
  20. &quot;price&quot;: 20.0,
  21. &quot;image&quot;: &quot;https://i.imgur.com/OHHctnf.jpg&quot;
  22. }
  23. ]
  24. const RestaurantCard = (data) =&gt; {
  25. console.log(data, &#39;data1&#39;) //data is reachable
  26. return (
  27. &lt;&gt;   
  28. &lt;div className=&quot;res-card&quot;&gt;
  29. {console.log(helo, &#39;data2&#39;)} 
  30. {data.pizza?.map((helo,id) =&gt; 
  31. {
  32. return (
  33. &lt;p key={id}&gt;{helo.name}&lt;/p&gt;
  34. &lt;p key={id}&gt;{helo.name}&lt;/p&gt;
  35. )
  36. }
  37. )}
  38. &lt;/div&gt;
  39. &lt;/&gt;
  40. ) 
  41. }
  42. ================================= 
  43. const Body = () =&gt; {
  44. return (
  45. &lt;&gt;
  46. &lt;div className=&quot;res-container&quot;&gt;&lt;RestaurantCard data={mockJson} /&gt;
  47. &lt;/div&gt;
  48. &lt;/&gt;
  49. )
  50. }

I'm unable to get {helo.name}, what wrong am i doing ?

答案1

得分: 0

Option one:

  1. // 解构赋值
  2. const RestaurantCard = ({ data }) => {
  3. console.log(data, 'data1') // 可以访问到data
  4. return (
  5. <>
  6. <div className="res-card">
  7. {console.log(helo, 'data2')}
  8. {data?.pizza?.map((helo, id) =>
  9. {
  10. return (
  11. <p key={id}>{helo.name}</p>
  12. <p key={id}>{helo.name}</p>
  13. )
  14. }
  15. )}
  16. </div>
  17. </>
  18. )
  19. }

Option two:

  1. // 作为props访问
  2. const RestaurantCard = (props) => {
  3. console.log(data, 'data1') // 可以访问到data
  4. return (
  5. <>
  6. <div className="res-card">
  7. {console.log(helo, 'data2')}
  8. {props?.data?.pizza?.map((helo, id) =>
  9. {
  10. return (
  11. <p key={id}>{helo.name}</p>
  12. <p key={id}>{helo.name}</p>
  13. )
  14. }
  15. )}
  16. </div>
  17. </>
  18. )
  19. }
英文:

You should either destruct the data prop or receive it using props:

Option one:

  1. // destructuring
  2. const RestaurantCard = ({data}) =&gt; {
  3. console.log(data, &#39;data1&#39;) //data is reachable
  4. return (
  5. &lt;&gt;   
  6. &lt;div className=&quot;res-card&quot;&gt;
  7. {console.log(helo, &#39;data2&#39;)} 
  8. {data?.pizza?.map((helo,id) =&gt; 
  9. {
  10. return (
  11. &lt;p key={id}&gt;{helo.name}&lt;/p&gt;
  12. &lt;p key={id}&gt;{helo.name}&lt;/p&gt;
  13. )
  14. }
  15. )}
  16. &lt;/div&gt;
  17. &lt;/&gt;
  18. ) 
  19. }

Option two:

  1. // accessing it as props
  2. const RestaurantCard = (props) =&gt; {
  3. console.log(data, &#39;data1&#39;) //data is reachable
  4. return (
  5. &lt;&gt;   
  6. &lt;div className=&quot;res-card&quot;&gt;
  7. {console.log(helo, &#39;data2&#39;)} 
  8. {props?.data?.pizza?.map((helo,id) =&gt; 
  9. {
  10. return (
  11. &lt;p key={id}&gt;{helo.name}&lt;/p&gt;
  12. &lt;p key={id}&gt;{helo.name}&lt;/p&gt;
  13. )
  14. }
  15. )}
  16. &lt;/div&gt;
  17. &lt;/&gt;
  18. ) 
  19. }

huangapple
  • 本文由 发表于 2023年4月17日 04:34:22
  • 转载请务必保留本文链接：https://go.coder-hub.com/76030188.html
  • arraylist
  • arrays
  • javascript
  • mapping
  • reactjs
匿名

发表评论

匿名网友

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

确定