tela em branco com erro Uncaught TypeError: Cannot read properties of undefined (reading 'some') | React: praticando React com Js

2
respostas

Referente ao curso React: praticando React com Js

por Larissa Couto Ferreira

| 141.9k xp | 2 posts

boa noite, preciso de uma ajuda estou tendo problemas ao abrir no navegador o projeto da aula, no devtools aparece a mensagem seguinte:

Uncaught TypeError: Cannot read properties of undefined (reading 'some') at Card (index.js:26:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at recoverFromConcurrentError (react-dom.development.js:25850:1) at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)

e a tela fica em branco

o código do card esta assim:

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

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>
    )
        }

export default Card;

2 respostas

por Neilton Seguins

| 329.8k xp | 467 posts

Instrutor Instrutor e desenvolvedor de software

20/09/2023

Olá, Larissa! Tudo bem?

Pelo que você descreveu, parece que o problema está na linha onde você está tentando acessar a propriedade 'some' do objeto 'favorito'. O erro 'Cannot read properties of undefined (reading 'some')' geralmente ocorre quando você tenta acessar uma propriedade ou método de um objeto que ainda não foi definido.

No seu caso, é possível que 'favorito' esteja retornando 'undefined' do seu contexto de Favoritos. Isso poderia acontecer se o contexto de Favoritos não estiver sendo provido corretamente, ou se a variável 'favorito' não estiver sendo inicializada corretamente dentro do contexto.

Para corrigir isso, você pode verificar se o seu contexto de Favoritos está sendo provido corretamente para os componentes que o utilizam. Além disso, você pode verificar se 'favorito' está sendo inicializado corretamente dentro do seu contexto.

Por exemplo, se você estiver usando o 'useState' para inicializar 'favorito', certifique-se de que você está fornecendo um valor inicial, como um array vazio:

const [favorito, setFavorito] = useState([]);

Outra opção é adicionar uma verificação antes de tentar acessar o método 'some' para garantir que 'favorito' não seja 'undefined'. Isso pode evitar que o erro ocorra:

const ehFavorito = favorito ? favorito.some((fav) => fav.id === id) : false;

Espero ter ajudado e bons estudos!

por Larissa Couto Ferreira

| 141.9k xp | 2 posts

22/09/2023

boa tarde, obrigada consegui resolver este problema, porem agora aconteceu outro erro quando tento clicar no favoritar: