Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Código complexo e com invenssões desnecessárias

Tive que refatorar todo o código do curso pra fazer o negócio funcionar. Muito código complexo sem ter necessidade, por exemplo: Tentei de tudo fazer os states de array de objetos aparecerem na tela atualizando com os novos valores preenchidos no formulário, fiz de tudo que imaginarem. O que fiz pra resolver, criei 2 states de array, 1 pra cada propriedade, isso no componente app e formulário. Outra coisa que achei sem necessidade, é colocar códigos mais dificeis, sendo que dava pra fazer de forma mais fácil pra galera junior como eu, por exemplo:

export default function Formulario({setTarefas, setTempos}) {

const [novaTarefa, setNovaTarefa] = useState([]) const [novoTempo, setNovoTempo] = useState([])

const adicionarTarefa = (valor) => { valor.preventDefault() setTarefas(estadoAtual => [...estadoAtual, novaTarefa]) setTempos(estadoAtual => [...estadoAtual, novoTempo]) setNovaTarefa("") setNovoTempo("00:00") }

return (

Adicione um novo estudo <input type="text" value={novaTarefa} onChange={valor => setNovaTarefa(valor.target.value)} name="tarefa" placeholder="Quer estudar o que?" required />
Tempo <input type="time" value={novoTempo} onChange={valor => setNovoTempo(valor.target.value)} step="1" name="tempo" required />
); } Olha o meu onChange e olha o onChange do professor e compara. Olha o meu setTarefas e o setTempos inserindo novos valores que coisa linda e simples.
3 respostas
solução!

Fala dev, tudo certo?

Não entendi muito bem a pergunta, vou tentar responder com o que entendi.

Pelo seu código, parece que você dividiu o tarefa em 2 arrays, um com a string da tarefas e outro com a string dos tempos, certo?

Caso seja isso, podemos ter vários problemas como:

  1. Como conseguimos conectar o tempo a tarefa especifica? Daria para conectar utilizando o index de cada array, mas e se no futuro você quiser mudar a ordem das tarefas ou deletar alguma delas por exemplo?
  2. Para você saber qual deles está selecionado naquele momento, você vai precisar criar um outro estado utilizando o index do array que você criou (não sei se seria de tarefas ou tempos, você mesmo pode dizer), mas cai no mesmo problema acima. Caso você coloque apenas o index do array, você vai precisar contar que o index seja igual para o array tarefas e para o array tempos, o que pode não acontecer.
  3. Como você vai saber qual tarefa foi concluída? Se existe apenas o array tarefas e tempos e os dois guardam strings, se você remover a tarefa concluída dos dois arrays ela não aparecerá na tela mais, então você precisaria de um terceiro array como "concluidas" por exemplo, só para guardar quais tarefas foram concluídas, e caso seja um array com os index das tarefas, cai no mesmo problema do primeiro ponto.
  4. Uma forma de resolver o problema do index é criando um id com a biblioteca uuid, mas para guardar a informação precisamos transformar o array de tarefas em um objeto.

Com o array de objetos como tratado no curso, temos benefícios como:

  1. O estado está unificado, evitando problemas como duplicidade de estados e manutenção (como saber qual está selecionado ou concluído).
  2. Como mudamos apenas um estado, caso o código escale, o estado mudado deve atualizar a tela apenas uma vez, com vários estados, um código pode facilmente gerar problemas de performance.
  3. Podemos adicionar o id com um array de objetos, que cria uma informação única para cada tarefa, permitindo então que saibamos a diferença entre cada tarefa sem depender de index ou strings que podem ser iguais.

Subi o código do curso na Vercel especificamente para a sua dúvida e ele parece funcionar como esperado, confere aqui: https://alura-studies-lfrprazeres.vercel.app/

Se você estiver com dificuldade de replicar, pega o código no meu Github: https://github.com/lfrprazeres/alura-studies

OBS: se for clonar o repositório, o node tem que estar na versão 16 ou menor.

Se você estiver tendo problemas com manipulação de arrays de objetos, te recomendo um curso específicamente sobre arrays que existe na plataforma.

Curso sobre arrays: https://cursos.alura.com.br/course/javascript-arrays

Também tem um artigo falando sobre desestruturação de objetos, que é algo bem comum no meio Javascript: https://www.alura.com.br/artigos/es6-desestruturando-objetos

Caso eu não tenha respondido a sua dúvida e queira elaborar depois fique a vontade que eu respondo novamente!

Bons estudos!

Olá professor, td tranquilo? Desculpe se fui meio ignorante, é que não consegui fazer funcionar do jeito que tu fez, por exemplo, na parte que fazia um map no state de tarefas, sempre dava erro, tentei de tudo pra arrumar, mas sempre dizia que is not function kkk ou dava sempre algum erro, o teu código funciona, mas tem coisas ali que eu não vi fazer sentido ou o código tava meio explicado, como tu criar um state como state ={ propriedade1: "valor", propriedade2: "valor2"}. Isso pra mim não funcionava.

Sem problemas!

Consegue compartilhar comigo o código com erro que você não conseguiu fazer? Manda um link de um repositório seu no GitHub e eu vejo o que teve de problema e te explico por aqui!