Обновление (новые изменения): Итак, теперь я в значительной степени преобразовал свой код в функциональный компонент, однако это выглядит так, как будто ничего не возвращается из API, или, возможно, я не "монтирую" правильно? Я получаю сообщение об ошибке «TypeError: Невозможно прочитать свойство« map »из undefined», означающее, что ничего не возвращается, но я не уверен, почему. Помогите?
Старый пост (ранее я пытался использовать хук в компоненте класса):
Я новенькая, чтобы реагировать, и недавно я был Получение этой ошибки при попытке перейти на страницу по щелчку карты памяти (с помощью пользовательского интерфейса материала). Таким образом, я в значительной степени следую инструкции pu sh, чтобы вести историю маршрута к странице, по которой я хочу перейти с помощью функции, и вызывать эту функцию, когда я нажимаю на медиа-карту. Ниже мой код и ошибка, которую я получаю. У вас есть идеи, почему у меня могут быть проблемы с этим?
Мой обновленный код
import Card from '@material-ui/core/Card';
import CardMedia from '@material-ui/core/CardMedia';
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
import {getItems} from "../Network/network_utility";
import {useHistory} from "react-router-dom";
import {makeStyles} from '@material-ui/core/styles';
import React, {useState, useEffect} from "react";
const useStyles = makeStyles(theme => ({
icon: {
marginRight: theme.spacing(2),
},
heroContent: {
padding: theme.spacing(8, 0, 6),
},
cardGrid: {
paddingTop: theme.spacing(6),
paddingBottom: theme.spacing(3),
position: "fixed"
}
}));
export default function Items() {
let history = useHistory();
const classes = useStyles();
const useFeaturedItems = () => {
const [featured_items, setFeaturedItems] = useState([]);
useEffect(() => {
getItems(1).then(response => setFeaturedItems(response["data"]))}, []);
return featured_items;
};
return (
<div>
<Container className={classes.cardGrid} maxWidth="lg">
<Grid container spacing={6}>
{useFeaturedItems().map((card, index) => (
<Grid item key={index} xs={16} sm={4} md={2}>
<Card raised={false} style={{height: "30vh", width: "20vh"}}>
<CardMedia
component="img"
src={card["thumbnail"]}
style={{height: "25vh", width: "20vh"}}
onClick={history.push("/item")}
>
</CardMedia>
<div style={{paddingLeft: "10px", paddingTop: "10px"}}>
<text style={{
whiteSpace: "nowrap",
overflow: "hidden",
display: "block",
textOverflow: "ellipsis"
}}>
{card["title"]}
</text>
</div>
</Card>
</Grid>
))}
</Grid>
</Container>
</div>
);
}