每次單擊卡片時，我都想向陣列中添加一個新物件，但是當我這樣做時，它會將最后一個密鑰對更改為新物件，并且不會添加它。我選擇了這種更新狀態的方法，因為我發現它比帶有推送的方法更受歡迎。
import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { AiOutlineHeart, AiFillHeart } from "react-icons/ai";
import styles from "./MovieCard.module.css";
const imagePrefixUrl = "http://image.tmdb.org/t/p/w500";
const MovieCard = (props) => {
const [items, setItems] = useState(
JSON.parse(localStorage.getItem("favorites")) || []
);
const [liked, setLiked] = useState(false);
const movie = props?.movie;
const addFavoriteHandler = (movie) => {
setItems((data) => [...data, movie]);
};
useEffect(() => {
localStorage.setItem("favorites", JSON.stringify(items));
}, [items]);
return (
<div className={styles.container}>
{liked ? (
<button className={styles.heartIcon} onClick={() => setLiked(false)}>
<AiFillHeart />
</button>
) : (
<button
className={styles.heartIcon}
onClick={() => addFavoriteHandler(movie)}
>
<AiOutlineHeart />
</button>
)}
<Link to={`/movie/${movie.id}`} title={movie?.title}>
<img src={`${imagePrefixUrl}${movie?.backdrop_path}`} />
<p>{movie?.title}</p>
</Link>
</div>
);
};
export default MovieCard;
uj5u.com熱心網友回復：
我從組件名稱 MovieCard 中假設，您的應用程式將在父組件（假設為 MovieCardList）下有該組件的多個實體。解決您的問題的方法是解除狀態并 addFavoriteHandler
const [items, setItems] = useState(
JSON.parse(localStorage.getItem("favorites")) || []
);
到父組件 MovieCardList 并將處理程式 addFavoriteHandler 作為 prop 傳遞給每個 MovieCard。這將確保您有一個單點來更新您的 localStorage 密鑰收藏夾，并且它不會被新的更新覆寫。
您遇到覆寫問題的原因是每張卡都有一個專案實體，并且在更新它之前它不會從 localStorage 獲取最新的收藏夾值，這意味著它總是會根據當前代碼覆寫 localStorage 中的收藏夾。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/494428.html
標籤：javascript 反应 使用状态