Я пытаюсь изменить состояние компонента с данными из внешнего API. Состояние состоит в том, чтобы добавить компонент в избранное, но возвращает неопределенное значение. Я уже использую функции стрелок, и .bind() тоже не работает. Что мне здесь не хватает?
Компонент библиотеки:
export default function LibraryComponent() {
const [albums, setAlbums] = useState<any[]>([]);
const [albumTitle, setAlbumTitle] = useState<any[]>([]);
const [photoUrl, setPhotoUrl] = useState();
const [favourite, setFavourite] = useState<any[]>([]);
//FETCH DATA
const fetchData = () => {
const getAlbums = "https://jsonplaceholder.typicode.com/albums?_limit=20";
const getPhotos =
"https://627ed423b75a25d3f3bd811f.mockapi.io/api/photos/1"; //random number here
const albums = axios.get(getAlbums).then((res) => {
setAlbums(res.data);
});
const photoUrl = axios.get(getPhotos).then((res) => {
setPhotoUrl(res.data.images);
});
};
const addFavourite = (album: []) => {
const favouriteList = [...favourite, album];
setFavourite(favouriteList);
};
return (
<>
<div className = "container-fluid w-50">
<div className = "row">
{albums.map((album) => (
<div key = {album.id} className = "col-lg-2 col-sm-6">
<div className = "col-lg-12 col-sm-6">
<div className = "thumbnail img-responsive">
<AlbumComponent
title = {album.title}
image = {photoUrl}
handleFavouriteClick = {addFavourite}
/>
</div>
</div>
</div>
))}
</div>
</div>
</>
);
}
Компонент альбома:
type Meta = {
title: any;
image: any;
handleFavouriteClick: any;
};
export default function AlbumComponent(props: Meta) {
return (
<>
<img src = {props.image} alt = "" className = "img-fluid img-thumbnail" />
<p>{props.title}</p>
<div onClick = {() => props.handleFavouriteClick()}>
<i className = "fa-regular fa-heart"></i>
</div>
</>
);
}
Почему это вызывает беспокойство? В любом случае я отредактировал код
Зачем вам вызывать один и тот же API дважды? Специально для того, что появляются разные данные? Я предположил, что это опечатка, и должен был быть другой вызов API.
На самом деле, используя типы для ваших данных и реквизитов, вы поймали бы, что вы не вызываете обработчик с правильными параметрами. Я настоятельно рекомендую использовать типы, если вы собираетесь использовать Typescript (т. е. избегать any
).
addFavourite
ожидает параметр album
.
Попробуйте что-то вроде этого:
<AlbumComponent
title = {album.title}
image = {photoUrl}
handleFavouriteClick = {() => addFavourite(album)}
/>
Выдает мне "Слишком много повторных рендеров". ошибка.
Это было все же. Я исправил ошибку «Слишком много повторных рендеров», обернув handleFavouriteClick = {addFavourite}
функцией стрелки.
Вам нужно извлечь значение из ввода и предоставить его в качестве параметра функции. Для этого можно использовать контролируемый ввод. Что-то вроде этого:
export default function AlbumComponent(props: Meta) {
const [value, setValue] = React.useState()
return (
<>
<img src = {props.image} alt = "" className = "img-fluid img-thumbnail" />
<p>{props.title}</p>
<div onClick = {() => props.handleFavouriteClick(value)}>
<i className = "fa-regular fa-heart" value = {value} onChange = {setValue}></i>
</div>
</>
);
}
Почему ты звонишь
axios.get(getAlbums)
дважды?