Entrar Ainda não tem acesso?
1
resposta

ncaught TypeError: Cannot assign to read only property 'completo' of object '#<Object>'

Referente ao curso React: gerenciando estado com Recoil, no capítulo Manipulando os eventos e atividade Atualizando o evento

por GABRIEL SANTOS FREITAS DE OLIVEIRA
| 36.6k xp | 20 posts

import React from 'react'; import { useSetRecoilState } from 'recoil'; import { IEvento } from '../../../interfaces/IEvento'; import { listaDeEventosState } from '../../../state/atom';

const EventoCheckbox: React.FC<{evento : IEvento}> = ({ evento }) => {

const setListaDeEventos = useSetRecoilState<IEvento[]>(listaDeEventosState)

const alterarStatus = () => { console.log(evento.completo) if(evento.completo){ evento.completo = false } else{ evento.completo = true }

setListaDeEventos(listaAntiga => {

  const i  = listaAntiga.findIndex(e => e.id ===  evento.id )
  return [...listaAntiga.slice(0,i) , evento , ...listaAntiga.slice(i+1)]
})

} const estilos = [ 'far', 'fa-2x', evento.completo ? 'fa-check-square' : 'fa-square' ]

return (<i className={estilos.join(' ')} onClick={alterarStatus}>) }

export default EventoCheckbox

1 resposta
por Vinicios Neves
| 997.6k xp | 1100 posts
Instrutor Tech Lead | Tech Educator

Salve, Gabriel.

As props que recebemos são imutáveis, e não deveríamos alterá-las.

Você precisa fazer um pequeno ajuste na sua função:

  const alterarStatus = () => {
    const eventoAlterado = {
      ...evento
    }
    eventoAlterado.completo = !eventoAlterado.completo

    setListaDeEventos(listaAntiga => {
      const indice = listaAntiga.findIndex(evt => evt.id === evento.id)
      return [...listaAntiga.slice(0, indice), eventoAlterado, ...listaAntiga.slice(indice + 1)]
    })
  }