2
respostas

Erro ao mover card

Olá, ao tentar criar um evento e arrastar para outra data, aparece um erro no console e a data na lista de eventos não atualiza. Fiz exatamente igual ao código apresentado na aula.

erro: react-dom.development.js:67 Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function. at $b852c5f3008abacb$var$EventButton

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

2 respostas

E aí!beleza? Essa mensagem de erro indica que tá tentando fazer uma atualização de estado em um componente que já foi desmontado.

O negócio é que quando tu arrasta o evento pra outra data, tá rolado alguma coisa que tá tentando mexer no estado de um componente que já não existe mais na tela.

A solução é dar uma olhada no código onde tu tá mexendo com o estado (provavelmente em algum lugar que tá usando useState ou algo do tipo) e garantir que não tá rolando atualizações depois que o componente foi desmontado. Se tiver, tu precisa cancelar essas tarefas assíncronas ou subscriptions no cleanup do useEffect.

Dá uma revisada no teu código e, se precisar, cola aqui pra eu dar uma olhada mais a fundo!

Fui dar uma olhada na documentação do mas ainda ta fora do ar :/ https://docs.kalend.org/docs/intro%E2%80%9D

Salve mano, analisei os componentes e o hook, mas só consegui chegar a conclusão de que o kalendEventoAtualizado guarda os valores atualizados sempre que mexo no card, mas eventoAtualizado nem sempre mostra algum valor no console e nem sempre atualizarEvento(eventoAtualizado) consegue pegar esse valor atualizado na lógica do Calendario:

const onEventDragFinish: OnEventDragFinish = ( kalendEventoInalterado: CalendarEvent, kalendEventoAtualizado: CalendarEvent ) => { const evento = eventos.find(evento => evento.descricao === kalendEventoAtualizado.summary) if (evento) { const eventoAtualizado = { ...evento } eventoAtualizado.inicio = new Date(kalendEventoAtualizado.startAt) eventoAtualizado.fim = new Date(kalendEventoAtualizado.endAt) atualizarEvento(eventoAtualizado) }

console.log(kalendEventoAtualizado)

};

Eu literalmente copiei e colei o código do repositório do instrutor para fazer um teste e ver se funcionava e nada. As vezes, quando salvo algum console.log() no componente Calendario ou no Hook, ele mostra o erro e depois começa a atualizar os valores ao arrastar, porém quando dou F5 o bug volta.

O meu repositório desse projeto é https://github.com/tenoriobn/event-tracker caso queira dar uma olhada.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software