class ItemGrid extends React.Component {
handleCart = (id) => {
this.props.addFunction(id);
}
render() {
const { classes } = this.props;
var itemArray = this.props.items;
var newArray = [];
for (var i = 0; i < itemArray.length; i++) {
if (itemArray[i].category == 6) {
newArray.push(itemArray[i]);
}
}
for (var i = 0; i < itemArray.length; i++) {
if (itemArray[i].category != 6) {
newArray.push(itemArray[i]);
}
}
itemArray = newArray;
return (
<div className={classes.root}>
<Grid container spacing={8} className={classes.container}>
<Grid item xs={12}>
<Grid container className="item-grid" justify="space-evenly" alighitems="center" spacing={0}>
{itemArray.map(function(item, id) {
return <Paper className={classes.gridItem} key={id}>
{getImage(classes, item)}
<Typography className={classes.itemName}>{item.name}</Typography>
<Typography className={classes.itemPrice}>Price: {numberWithCommas(item.price)} ISK</Typography>
<div className={classes.addButtonDiv}>
<Button variant="contained" className={classes.addButton} onClick={() => this.handleCart(item.id)}>
Add to cart
<CartIcon/>
</Button>
</div>
</Paper>
}, this)}
</Grid>
</Grid>
</Grid>
</div>
);
}
}
function getImage(classes, item) {
if (item.category == 6) {
return <div className={classes.itemImg}><img src={"https://image.eveonline.com/Render/" + item.id + "_256.png"} alt={item[1]} className={classes.itemImg}></img></div>
} else {
return <div className={classes.itemImg}><img src={"https://image.eveonline.com/Type/" + item.id + "_64.png"} alt={item[1]} className={classes.itemImg}></img></div>
}
}
因此,我在这个可由用户购买的商品网格的顶部有一个搜索栏。每次搜索时,尽管我看到“从image.eveonline.com获取数据”消息,所以我假设浏览器未正确缓存图像以备后用。重新渲染组件时,缓存的图像会被破坏吗?有什么办法可以保存它们?