如何使用map-Reactjs在javascript函数中呈现json数据
我正在使用材质ui库创建类似卡片的项目。我将项目列表存储在js文件中，如下所示：-如何使用map-Reactjs在javascript函数中呈现json数据,javascript,reactjs,Javascript,Reactjs,我正在使用材质ui库创建类似卡片的项目。我将项目列表存储在js文件中，如下所示：- var Data = [ { name: "Tandoori Pizza", image: "Images/pizza.png", price: "Rs.200", sizes: { Small: 100, Medium: 200, Large: 300 }, }, { name: "Vegg
var Data = [
{
name: "Tandoori Pizza",
image: "Images/pizza.png",
price: "Rs.200",
sizes: { Small: 100, Medium: 200, Large: 300 },
},
{
name: "Veggie Supreme",
image: "Images/pizza.png",
price: "Rs.250",
sizes: { Small: 100, Medium: 200, Large: 300 },
}
]
有人能告诉我如何编写Data.map的语法以使用MediaCard呈现Data.js中的所有项目吗？您可以尝试一下，您必须在每个项目上循环并呈现一个组件
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
function MediaCard() {
const Data = [
{
name: "Tandoori Pizza",
image: "Images/pizza.png",
price: "Rs.200",
sizes: { Small: 100, Medium: 200, Large: 300 },
},
{
name: "Veggie Supreme",
image: "Images/pizza.png",
price: "Rs.250",
sizes: { Small: 100, Medium: 200, Large: 300 },
},
];
const classes = useStyles();
return (
<>
{Data.map((item) => {
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={"/static/" + item.image} // put your images inside static folder.
title={item.name}
/>
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
>
{item.name}
</Typography>
<Typography
gutterBottom
variant="h5"
component="h2"
>
Price: {item.price}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Add to Cart
</Button>
</CardActions>
</Card>
);
})}
</>
);
}
您可以尝试这样做，您必须在每个项目上循环并渲染一个组件
const useStyles = makeStyles({
root: {
maxWidth: 345,
},
media: {
height: 140,
},
});
function MediaCard() {
const Data = [
{
name: "Tandoori Pizza",
image: "Images/pizza.png",
price: "Rs.200",
sizes: { Small: 100, Medium: 200, Large: 300 },
},
{
name: "Veggie Supreme",
image: "Images/pizza.png",
price: "Rs.250",
sizes: { Small: 100, Medium: 200, Large: 300 },
},
];
const classes = useStyles();
return (
<>
{Data.map((item) => {
return (
<Card className={classes.root}>
<CardActionArea>
<CardMedia
className={classes.media}
image={"/static/" + item.image} // put your images inside static folder.
title={item.name}
/>
<CardContent>
<Typography
gutterBottom
variant="h5"
component="h2"
>
{item.name}
</Typography>
<Typography
gutterBottom
variant="h5"
component="h2"
>
Price: {item.price}
</Typography>
</CardContent>
</CardActionArea>
<CardActions>
<Button size="small" color="primary">
Add to Cart
</Button>
</CardActions>
</Card>
);
})}
</>
);
}
我不知道你想把什么样的信息放在你的程序中，以及你想把它放在哪里，因为你的两个例子不匹配，或者至少对我来说没有意义 然而，这一课浮现在脑海中，似乎正是你所要求的。我只是不知道您想要如何准确地实现它，所以我不能说如何编写map函数 否则，我会写一些像 const cardList=Data.mapx=>{ 回来 }; 在你程序的其他地方，你可以在另一个空间里弹出卡片列表，就像这样 {cardList}
不幸的是，没有更好的例子，我不能说我还能做什么。实际上，你没有一个渲染函数或任何类型的状态，你可以用它来存储导入的数据。我不知道你想在你的程序中输入什么样的信息，以及你想把它放在哪里，因为你的两个例子不匹配，或者至少对我来说没有意义 然而，这一课浮现在脑海中，似乎正是你所要求的。我只是不知道您想要如何准确地实现它，所以我不能说如何编写map函数 否则，我会写一些像 const cardList=Data.mapx=>{ 回来 }; 在你程序的其他地方，你可以在另一个空间里弹出卡片列表，就像这样 {cardList}
不幸的是，没有更好的例子，我不能说我还能做什么。按原样，这里没有渲染函数或任何类型的状态，可以用来存储导入的数据。您想让MediaCard只负责一项。创建映射项目数组的更高级别组件 然后，更高级别的组件还可以用于对数据数组进行过滤，以仅呈现满足特定条件（如类别、价格或 下面是一个简单的列表示例，使用映射简化版MediaCard的 常量应用==>{ 回来 菜单 ; ; } 常量菜单列表==>{ const[items，setItems]=React.useStateData； 回来 这里有些过滤器用于各种类别或价格过滤器 {items.mapitem=>} ; }; const MediaCard={item}=>{ 回来 {item.name} 价格：{item.Price} ; }; //渲染它 ReactDOM.render , document.getElementByIdreact ; var Data=[{name:Tandoori Pizza，image:Images/Pizza.png，价格：Rs.200，尺码：{Small:100，Medium:200，Large:300}，{name:Veggie Supreme，image:Images/Pizza.png，价格：Rs.250，尺码：{Small:100，Medium:200，Large:300}]；
您想让MediaCard只负责一个项目。创建映射项目数组的更高级别组件 然后，更高级别的组件还可以用于对数据数组进行过滤，以仅呈现满足特定条件（如类别、价格或 下面是一个简单的列表示例，使用映射简化版MediaCard的 常量应用==>{ 回来 菜单 ; ; } 常量菜单列表==>{ const[items，setItems]=React.useStateData； 回来 这里有些过滤器用于各种类别或价格过滤器 {items.mapitem=>} ; }; const MediaCard={item}=>{ 回来 {item.name} 价格：{item.Price} ; }; //渲染它 ReactDOM.render , document.getElementByIdreact ; var Data=[{name:Tandoori Pizza，image:Images/Pizza.png，价格：Rs.200，尺码：{Small:100，Medium:200，Large:300}，{name:Veggie Supreme，image:Images/Pizza.png，价格：Rs.250，尺码：{Small:100，Medium:200，Large:300}]；
您想在MediaCard组件内部使用map还是在map内部使用MediaCard并将数据传递给组件？如果这有道理的话，一切都好。但我不确定哪一个更有效。如果你创建一个更高级别的组件，将数据映射到返回单个@charlietfl，可能会减少应用程序中的混乱，并使MediaCard可重用。我实际上想让MediaCard本身成为另一个文件，但不确定如何做到这一点。如果可能的话，你能给我一个片段吗？你想在你的MediaCard组件内部使用map还是在map内部使用MediaCard并将数据传递给组件？如果这有道理的话，一切都好。但我不确定哪一个更有效。可能会减少混乱
如果您创建了一个更高级别的组件，将数据映射到返回单个@charlietfl，那么我实际上想将MediaCard作为另一个文件，但不确定如何实现。如果可能的话，你能给我一个片段吗？谢谢你的回答。如何在上述代码中使用item.name、item.image、item.price？正如我在代码中提到的，您可以将图像作为道具传递给CardMedia，图像必须是URL或路径，但您必须对其进行调整。图像必须移动到静态文件夹并使用路径/static/+item.image。对于可以在排版中显示的价格，我更新了代码段以包含价格。我得到了一个错误：render没有返回任何内容。这通常意味着缺少返回语句。或者，若不呈现任何内容，则返回null。我认为导入数据中存在问题，请尝试直接在组件中使用数据，我完成了代码段。您可以检查代码。此映射应位于更高级别的组件中。应该只负责一项谢谢你的回答。如何在上述代码中使用item.name、item.image、item.price？正如我在代码中提到的，您可以将图像作为道具传递给CardMedia，图像必须是URL或路径，但您必须对其进行调整。图像必须移动到静态文件夹并使用路径/static/+item.image。对于可以在排版中显示的价格，我更新了代码段以包含价格。我得到了一个错误：render没有返回任何内容。这通常意味着缺少返回语句。或者，若不呈现任何内容，则返回null。我认为导入数据中存在问题，请尝试直接在组件中使用数据，我完成了代码段。您可以检查代码。此映射应位于更高级别的组件中。应只负责一个项目