我有点陌生,这是第一次尝试从API调用中获取信息,进行映射并为每个响应制作一个Material-UI卡。当我制作一张卡时,它就很好了。当我映射响应时,将为每个响应制作卡片,并将文本正确输入到字段中,但不会加载图像。即使使用未从响应加载的静态图像,该图像也不会显示。这是我正在查看的内容:
//调用API,映射结果并构建卡
import React, {Component} from 'react'
import Request from 'superagent'
import Grid from '@material-ui/core/Grid'
import Cards from './cards'
const url = "http://localhost:4000/products"
const get = Request.get(url)
class ProductList extends Component {
state = {
products: []
}
constructor() {
super()
this.getProducts()
}
getProducts = () =>
Request.get(url)
.then((response) => {
const prods = (response.body.products)
console.log(prods)
this.setState({products: prods})
})
render() {
return (
<div>
{this.state.products ? (
<Grid container spacing={24} style = {{padding: 24}}>
{ this.state.products.map(prods => (
<Grid item xs={8} sm={4} lg={4} xl={3}>
<Cards id={prods.id} name = {prods.name} quantity = {prods.quantity} price = {prods.price} image = {prods.iamge} />
</Grid>
))}
</Grid>
) : "No products found" }
</div>
)
}
}
export default ProductList;
//构建卡
import React from 'react'
import PropTypes from 'prop-types';
import { withStyles } 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 CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Request from 'superagent';
const styles = {
card: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
};
const Cards = (props) => {
return(
<div>
<Card>
<CardMedia
image= {require ("./images/matcha.jpg")}
title="{props.name}"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
{props.name}
</Typography>
<Typography component="p">
{props.price}
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
Cards.propTypes = {
classes: PropTypes.object.isRequired,
}
}
export default Cards
//建立个人卡
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } 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 CardMedia from '@material-ui/core/CardMedia';
import Button from '@material-ui/core/Button';
import Typography from '@material-ui/core/Typography';
import Request from 'superagent';
const styles = {
card: {
maxWidth: 345,
},
media: {
height: 0,
paddingTop: '56.25%', // 16:9
},
};
function SimpleMediaCard(props) {
const url = "http://localhost:4000/products";
const { classes } = props;
return (
<div>
<Card className={classes.card}>
<CardMedia
className={classes.media}
image= {require ("./images/matcha.jpg")}
title="Contemplative Reptile"
/>
<CardContent>
<Typography gutterBottom variant="headline" component="h2">
Lizard
</Typography>
<Typography component="p">
Lizards are a widespread group of squamate reptiles, with over 6,000 species, ranging
across all continents except Antarctica
</Typography>
</CardContent>
<CardActions>
<Button size="small" color="primary">
Share
</Button>
<Button size="small" color="primary">
Learn More
</Button>
</CardActions>
</Card>
</div>
);
}
SimpleMediaCard.propTypes = {
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(SimpleMediaCard);
//渲染页面
import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } 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 CardMedia from '@material-ui/core/CardMedia'
import Button from '@material-ui/core/Button'
import Typography from '@material-ui/core/Typography'
import MenuBar from '../menubar'
import SimpleMediaCard from '../card'
import ProductList from '../productList'
function Products (props) {
return (
<div>
<MenuBar />
<SimpleMediaCard />
<ProductList />
</div>
)
}
export default Products
在呈现的页面上有四张卡片。第一个是应该包含的图片和文字。接下来的三张卡片(数据库中有三项)显示文本,但没有图像。我以为起初我在使用webpack时遇到问题,需要“ require”,但是即使使用静态图像链接,仍然没有图像。有什么想法吗?
经过一天半的搜索,初始修复非常简单。 CardMedia需要height属性才能渲染图像。添加
<CardMedia style = {{ height: 0, paddingTop: '56%'}}
image= {require ("./images/matcha.jpg")
至少渲染静态图像。希望这对某人有帮助!