如何将API数据导入物料界面卡片

Question

我目前正在制作一个Recipe应用程序，我正在从这个名为edamame的API中提取数据。我从MaterialUI导入卡片，并将其导入到我的.js文件中，该文件调用数据的API。我把数据存储在一个名为recipes的常量中，但我很难让数据出现在我导入的卡中。我可以在本地创建卡片，而无需从材料UI导入，并使API数据显示得很好。但是一旦Material UI出现，我就开始有问题了。我应该如何处理？

MealPlan。Js(调用API并存储数据(

import React, { useState, useEffect } from "react";
import style from "./recipe.module.css";
import "./App.css";
import NavigationBar from "./NavigationBar";
import Card from "./card";
import { Grid } from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
gridContainer: {
paddingLeft: "20px",
paddingRight: "20px",
},
});
export default function MealPlan() {
//  below we define the useStates
const [recipes, setRecipes] = useState([]); //Recipes pulled from the api through the search function are stored in this const
const [search, setSearch] = useState("");
const [query, setQuery] = useState("chicken");
const APP_ID = "removed";
const APP_KEY = "removed";
useEffect(() => {
//dispatch call to fetch items // get recipes runs the function when useEffect is active
getRecipes(); // eslint-disable-next-line
}, [query]); //only refreshes when query is called
const getRecipes = async () => {
const response = await fetch(
`https://api.edamam.com/search?q=${query}&app_id=${APP_ID}&app_key=${APP_KEY}`
); 

const data = await response.json();  
setRecipes(data.hits);
console.log(data.hits);
};

//my personal card
const MealPlanCard = ({ title, calories, image, ingredients }) => {
const round = Math.round(calories);
return (
<div className={style.recipe}>
<h1>{title}</h1>
<img className={style.image} src={image} alt="" />
</div>
);
};
return (
{recipes.slice(0, 1).map((recipe) => (
<MealPlanCard
key={recipe.recipe.label}
title={recipe.recipe.label}
calories={recipe.recipe.calories}
image={recipe.recipe.image}
ingredients={recipe.recipe.ingredients}
/>
))}
</div>
<Grid container spacing={4} className={classes.gridContainer}>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
<Grid item xs={12} sm={6} md={4}>
<Card />
</Grid>
</Grid>
</div>
);
}

这是从Material UI 导入卡的jsx

import { makeStyles } from "@material-ui/core/styles";
import Card from "@material-ui/core/Card";
import CardActions from "@material-ui/core/CardActions";
import CardContent from "@material-ui/core/CardContent";
import Button from "@material-ui/core/Button";
import Typography from "@material-ui/core/Typography";
const useStyles = makeStyles({
root: {
minWidth: 200,
},
bullet: {
display: "inline-block",
margin: "0 2px",
transform: "scale(0.8)",
},
title: {
fontSize: 14,
},
pos: {
marginBottom: 12,
},
});
export default function SimpleCard() {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Card className={classes.root}>
<CardContent></CardContent>
<CardActions>
<Button size="small">Button</Button>
</CardActions>
</Card>
);
}

以下是我的页面当前的外观https://i.stack.imgur.com/plUIa.jpg

我的目标是在底部填充导入的卡片，在顶部填充我个人卡片的内容。我该怎么做？

Answer 1

如果我理解正确，您希望您的功能组件SimpleCard从MealPlan接收数据。。。

如果是这种情况，请考虑以下内容：

SimpleCard.js

export default function SimpleCard(props) {
const classes = useStyles();
const bull = <span className={classes.bullet}>•</span>;
return (
<Card className={classes.root}>
<CardContent>{props.ingredient}</CardContent>
<CardActions>
<Button size="small">{props.calories}</Button>
</CardActions>
</Card>
);
}

在MealPlan.js上导入这个文件

import SimpleCard from 'pathTo/SimpleCard'

而不是rendend卡，你应该呈现SimpleCard-你已经导入并将你的变量作为道具(营养、卡路里…(

<Grid item xs={12} sm={6} md={4}>
<SimpleCard 
ingrediend={"banana"}
calories={40}
/>
</Grid>

基本上，这里的概念是创建组件，比如你创建的SimpleCard，并将你传递给它的数据填充进去，称为道具，比如配料和卡路里。

因此，您有多个具有不同数据的SimpleCard实例。

<Grid item xs={12} sm={6} md={4}>
<SimpleCard 
ingrediend={"chocolate"}
calories={100}
/>
</Grid>
<Grid item xs={12} sm={6} md={4}>
<SimpleCard 
ingrediend={"banana"}
calories={40}
/>
</Grid>

等等！