我是反應世界的新手。我正在嘗試編寫一個代碼，當按下圖標時，圖像被添加到收藏夾類別中，然後在收藏夾頁面上應該顯示圖像。我有一個問題，不知道如何動態地從圖像中獲取價值並將它們添加到最喜歡的類別而不會失去以前的價值。我認為我寫狀態的方式似乎一團糟。我用打字稿寫作並使用材料 UI
搜索結果
const [images, setImages] = useState([]);
const [favImage, setFavImage] = useState<ImageProps>({
id: '',
farm: 0,
server: '',
secret: '',
title: ''
});
const handleFavImage = ({ farm, server, id, secret, title }: ImageProps): void => {
setFavImage({ id, farm, server, secret, title });
};
圖像模態
const handleFavourite = (): void => {
setIcon(!icon);
if (!icon === true && handleFavImage !== undefined) {
handleFavImage({ farm, server, id, secret, title });
}
};
使用圖像 ID 作為參考。
使用 redux 存儲/本地存儲來存儲最喜歡的圖像 Id。
假設您在這裡擁有所有圖像：
const [images, setImages] = useState([]);
單擊圖標時，傳遞所選圖像的圖像 ID 並遍歷images數組以查找圖像道具。
只是為了讓您了解如何使用組件狀態數組來執行此操作：
讓我們創建一個狀態來存儲最喜歡的圖像 id
const [favImages, setFavImages] = useState([]);
點擊時看起來像這樣
const handleOnClick = (imageId) => {
var arr = [...favImages]; //copy array by value
arr.push(imageId)
setFavImages(arr) //override state with new values
}
現在該favImages數組具有最喜歡的圖像 ID 列表。
現在，favImages在您的favourite page組件中使用它。
let favImageProps = props.images.filter(image => props.favImages.indexOf(image.id) !== -1)
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句