4
respostas

[Dúvida] Problemas ao desfavoritar

Boa noite!

Ao favoritar mais de um filme, eu não consigo desfavoritar apenas o primeiro. Ao clicar para desfavoritar o primeiro, o último é desfavoritado e assim sucessivamente até chegar no primeiro. O link abaixo é do vídeo que fiz para que o meu problema fique mais claro:

[https://drive.google.com/file/d/1kQZhCfxoglkJrRx7u1FjvQ-bS_TvR6nM/view?usp=sharing](Problemas ao desfavoritar)

Como seria possível solucionar este problema?

Obrigado pela atenção :)

4 respostas

Olá Wellington, pode postar seu código aqui no chat para que eu possa tentar te ajudar melhor?

Claro, Rafael!

CONTEXTOS ->Favorito.js:

import { createContext, useContext, useState } from 'react'

export const FavoritosContext = createContext()
FavoritosContext.displayName = 'Favoritos' 

export default function FavoritosProvider({ children }) {
    const [favorito, setFavorito] = useState([])

    return (
        <FavoritosContext.Provider
            value= {{ favorito, setFavorito }}>
            {children}
        </FavoritosContext.Provider>
    )
}

export function useFavoritoContext() {
    const { favorito, setFavorito } = useContext(FavoritosContext)

    function adicionarFavorito(novoFavorito) {
        const favoritoRepetido = favorito.some(item => item.id === novoFavorito.id)

        let novaLista = [...favorito]

        if(!favoritoRepetido) {
            novaLista.push(novoFavorito)
            return setFavorito(novaLista)
        }

        novaLista.splice(novaLista.indexOf(novoFavorito), 1)
        return setFavorito(novaLista)
    }
    return {
        favorito,
        adicionarFavorito
    }
}

CARD -> index.js:

import { useFavoritoContext } from 'contextos/Favoritos'
import styles from './Card.module.css'
import iconeFavoritar from './favoritar.png'
import iconeDesfavoritar from './desfavoritar.png'

export default function Card({ id, titulo, capa }) {
    const { favorito, adicionarFavorito } = useFavoritoContext()
    const ehFavorito = favorito.some((fav) => fav.id === id)
    const icone = !ehFavorito ? iconeFavoritar : iconeDesfavoritar

    return (
        <div className={styles.container}>
            <img
                src={capa}
                alt={titulo}
                className={styles.capa}
            />
            <h2>{titulo}</h2>
            <img
                src={icone}
                alt="Favoritar filme"
                className={styles.favoritar}
                onClick={() => {
                    adicionarFavorito({ id, titulo, capa })
                }}
            />
        </div>
    )
}

Estou tendo o mesmo problema!

Salve turma, o problema está no comando splice utilizado na aula.

novaLista.splice(novaLista.indexOf(novoFavorito), 1);

Alterem para essa forma que vai funcionar 100%

return setFavoritos(novaLista.filter(favorito => favorito.id !== novoFavorito.id));

hook final useFavoritoContext

export const useFavoritoContext = () => {
    const { favoritos, setFavoritos } = useContext(FavoritoContext);

    const adicionarFavoritos = () => {
        const favoritoRepetido = favoritos.some(favorito => favorito.id === novoFavorito.id);

        let novaLista = [...favoritos];
        if (!favoritoRepetido) {
            novaLista.push(novoFavorito);
            return setFavoritos(novaLista)
        }
        return setFavoritos(novaLista.filter(favorito => favorito.id !== novoFavorito.id));
    }

    return {
        favoritos, adicionarFavoritos
    };
}