0

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.

6
  • Estas haciendo un set en vez de un add
    – ICIM
    Commented el 31 jul. 2021 a las 22:57
  • Con el setMyList, estoy seteando el nuevo valor que se supone que tiene el array Commented el 31 jul. 2021 a las 22:59
  • Y si pruebas simplemente con 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 al state. Commented el 1 ago. 2021 a las 3:22
  • Reproduje tu componente en mi máquina y al hacerle click en el botón Agregar a Mi Lista se agregan correctamente los objetos al arreglo myList, lo puedo ver ya que muestro los items de myList iterándolos. Creo que no entiendo cuál es tu problema realmente. Podrías aclarar qué es el resultado que esperas con myList? Commented el 1 ago. 2021 a las 21:36
  • Hola @PauloUrbanoRivera intenté con setMyList([...myList, content]), pero por algún motivo en el primer click eliminar el arreglo original y haciendo un segundo click, agrega el objeto al arreglo. Commented el 2 ago. 2021 a las 14:30

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.