En un proyecto de React JS, trabajo con una API de películas y series.
Necesito obtener el objeto content (que comprende la información de la película o serie) a través de la función addToMyList, que se encuentra en un botón para agregar a lista de favoritos. Dicha función debería almacenar ese objeto en un arreglo llamado myList que se guardará en el LocalStorage, por medio de la función saveLS.
La primera vez que agrego el objeto, no hay problema. Pero si agrego otro, en vez de sumarse al array, reemplaza el primer objeto. Por ende, siempre tengo un array de un sólo objeto.
export default function TransitionsModal({ children, media_type, id }) {
const classes = useStyles();
const [open, setOpen] = useState(false);
const [content, setContent] = useState();
const [video, setVideo] = useState();
const lang = localStorage.getItem("lang");
const [myList, setMyList] = useState([]);
const handleOpen = () => {
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
const fetchData = async () => {
const { data } = await axios.get(
`https://api.themoviedb.org/3/${media_type}/${id}?api_key=${process.env.REACT_APP_API_KEY}&language=${lang}`
);
setContent(data);
};
const fetchVideo = async () => {
const { data } = await axios.get(
`https://api.themoviedb.org/3/${media_type}/${id}/videos?api_key=${process.env.REACT_APP_API_KEY}&language=${lang}`
);
setVideo(data.results[0]?.key);
};
const saveLS = (items) => {
localStorage.setItem("add-my-list", JSON.stringify(items));
};
const addToMyList = (content) => {
alert("Agregada a Mi Lista");
const newMyListArray = [...myList, content];
setMyList(newMyListArray);
saveLS(newMyListArray);
};
useEffect(() => {
fetchData();
fetchVideo();
// eslint-disable-next-line
}, [myList, lang]);
console.log("myList", myList);
return (
<>
<div
className="media"
style={{ cursor: "pointer" }}
color="inherit"
onClick={handleOpen}
>
{children}
</div>
<Modal
aria-labelledby="transition-modal-title"
aria-describedby="transition-modal-description"
className={classes.modal}
open={open}
onClose={handleClose}
closeAfterTransition
BackdropComponent={Backdrop}
BackdropProps={{
timeout: 500,
}}
>
<Fade in={open}>
{content && (
<div className={classes.paper}>
<div className="ContentModal">
<img
src={
content.poster_path
? `${img_500}/${content.poster_path}`
: unavailable
}
alt={content.name || content.title}
className="ContentModal_portrait"
/>
<img
src={
content.backdrop_path
? `${img_500}/${content.backdrop_path}`
: unavailableLandscape
}
alt={content.name || content.title}
className="ContentModal_landscape"
/>
<div className="ContentModal_about">
<span className="ContentModal_title">
{content.name || content.title} (
{(
content.first_air_date ||
content.release_date ||
"-----"
).substring(0, 4)}
)
</span>
{content.tagline && (
<i className="tagline">{content.tagline}</i>
)}
<span className="ContentModal_description">
{content.overview}
</span>
<div>
<Carousel id={id} media_type={media_type} />
</div>
<div
className="ContentModal_bottons"
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-around",
}}
>
<Button
style={{
backgroundColor: "var(--naranja)",
}}
variant="contained"
startIcon={<YouTubeIcon />}
color="secondary"
target="__blank"
href={`https://www.youtube.com/watch?v=${video}`}
>
<FormattedMessage
id="app.trailer"
defaultMessage="Watch the Trailer"
></FormattedMessage>
</Button>
<Button
style={{
backgroundColor: "var(--naranja)",
}}
variant="contained"
startIcon={<PlaylistAddIcon />}
color="secondary"
target="__blank"
onClick={(e) => {
e.preventDefault();
addToMyList(content);
}}
>
Agregar a Mi Lista
</Button>
</div>
</div>
</div>
</div>
)}
</Fade>
</Modal>
</>
);
}
Quisiera saber si estoy haciendo algo mal, porque lo hice en otros proyectos y no tuve inconvenientes. En éste si. También probé con el método push(), pero por algún motivo me agrega un 1 al arreglo en vez de el objeto.
setMyList([...myList, content])
, o podrías intercambiar el orden como los pasas. Recuerdo que una vez me sucedió algo parecido y era por el orden en que se los entregaba alstate
.Agregar a Mi Lista
se agregan correctamente los objetos al arreglomyList
, lo puedo ver ya que muestro los items demyList
iterándolos. Creo que no entiendo cuál es tu problema realmente. Podrías aclarar qué es el resultado que esperas conmyList
?