我正在嘗試使用來自外部 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>
</>
);
}
uj5u.com熱心網友回復：
addFavourite需要一個album引數。
嘗試這樣的事情：
<AlbumComponent
title={album.title}
image={photoUrl}
handleFavouriteClick={() => addFavourite(album)}
/>
uj5u.com熱心網友回復：
您需要從輸入中提取值并將其作為引數提供給函式。您可以為此使用受控輸入。像這樣的東西：
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>
</>
);
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/476047.html