英文:
JS Map confusion
问题
尝试从数组获取数据，收到错误。我已将数据传递到组件并访问披萨的数据，该数据是一个数组。请帮忙解决这个映射错误。我在映射中做错了什么？
const mockJson = {
"pizza": [
{
"id": 0,
"name": "玛格丽特",
"description": "",
"ingredients": ["番茄酱", "奶酪"],
"spicy": false,
"vegetarian": true,
"price": 17.0,
"image": "https://i.imgur.com/8B8YLOo.jpg"
},
{
"id": 1,
"name": "意大利辣香肠",
"description": "",
"ingredients": ["番茄酱", "奶酪", "双层辣香肠"],
"spicy": false,
"vegetarian": false,
"price": 20.0,
"image": "https://i.imgur.com/OHHctnf.jpg"
}
]
}
const RestaurantCard = (data) => {
console.log(data, 'data1') //数据可达
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{data.pizza?.map((helo, id) => {
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
})}
</div>
</>
)
}
const Body = () => {
return (
<>
<div className="res-container"><RestaurantCard data={mockJson} /></div>
</>
)
}
我无法获取 {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 ?
const mockJson = {
"pizza": [
{
"id": 0,
"name": "Margherita",
"description": "",
"ingredients": ["tomato sauce", "mozzarella"],
"spicy": false,
"vegetarian": true,
"price": 17.0,
"image": "https://i.imgur.com/8B8YLOo.jpg"
},
{
"id": 1,
"name": "Pepperoni",
"description": "",
"ingredients": ["tomato sauce", "mozzarella", "double pepperoni"],
"spicy": false,
"vegetarian": false,
"price": 20.0,
"image": "https://i.imgur.com/OHHctnf.jpg"
}
]
const RestaurantCard = (data) => {
console.log(data, 'data1') //data is reachable
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{data.pizza?.map((helo,id) =>
{
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
}
)}
</div>
</>
)
}
=================================
const Body = () => {
return (
<>
<div className="res-container"><RestaurantCard data={mockJson} />
</div>
</>
)
}
I'm unable to get {helo.name}, what wrong am i doing ?
答案1
得分: 0
Option one:
// 解构赋值
const RestaurantCard = ({ data }) => {
console.log(data, 'data1') // 可以访问到data
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{data?.pizza?.map((helo, id) =>
{
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
}
)}
</div>
</>
)
}
Option two:
// 作为props访问
const RestaurantCard = (props) => {
console.log(data, 'data1') // 可以访问到data
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{props?.data?.pizza?.map((helo, id) =>
{
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
}
)}
</div>
</>
)
}
英文:
You should either destruct the data prop or receive it using props:
Option one:
// destructuring
const RestaurantCard = ({data}) => {
console.log(data, 'data1') //data is reachable
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{data?.pizza?.map((helo,id) =>
{
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
}
)}
</div>
</>
)
}
Option two:
// accessing it as props
const RestaurantCard = (props) => {
console.log(data, 'data1') //data is reachable
return (
<>
<div className="res-card">
{console.log(helo, 'data2')}
{props?.data?.pizza?.map((helo,id) =>
{
return (
<p key={id}>{helo.name}</p>
<p key={id}>{helo.name}</p>
)
}
)}
</div>
</>
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论