Curso React: Adicionando novos serviços - #34
HTML-код
- Опубликовано: 8 фев 2025
- 🔴 CURSO COMPLETO DE REACT: www.udemy.com/...
📘 Ebook gratuito de React: www.horadecoda...
★ Nossos Cursos: www.horadecoda...
Nesta aula você vai criar os novos serviços do projeto
Ou seja, contabilizar o custo e também detalhar o que será feito com o orçamento total
Mais uma passo rumo a conclusão do nosso projeto em #React
Repositório: github.com/mat...
★ Livros recomendados: www.horadecoda...
▶ Instagram: @horadecodar
▶ GitHub: github.com/mat... 🔷 Telegram: t.me/horadecodar .
🟣 Discord Hora de Codar: / discord
Tive que pausar aos 14:37 porque estava dando erro. E foi erro de digitação aqui!
length e Service eu digitei tudo errado kk
Tive que abrir o código fonte do professor para poder comparar! Acho deu certo e vou prosseguindo :3
2 amigo
3 amigo
Comigo aconteceu em outra aula, kkkkk esse length é uma maravilha
Muito bom curso. Abrindo a mente no mundo do React. Parabéns, Matheus
valeu Allan! =D
Muito bom! Aprendendo bastante até aqui.
Quem está com problemas de não aparecer a mensagem o erro está no instante 8:37 do vídeo. O Matheus coloca chaves dentro do parêntese do state e o correto é colchete. Ele deve ter feito a correção no dele mas não mostrou no vídeo.
Fiz a alteração que você disse, mas ainda continua aparecendo a mensagem de erro apenas uma vez. Alguém conseguiu contornar esse problema?
acho que não mano, a variável service é uma hashmap ou dicionário pra galera do python, nao faz sentido ele declarar como lista se na função handleChange ele da um setService e usa sintaxe de dicionario com "chave : valor"
Quem me dera chegar a esse nível de programar de cabeça como o Matheus...😆
A prática leva a perfeição.
Pior é para quem era uma negação e achava que programação nunca entraria na minha vida......
E VOA Lá, to aqui estudando programação....
Sou da area de redes, mikrotik, cisco, servidores ubuntu, centos..... windows server....
Afinal, aonde da a grana é a PROGRAMAÇÃO
@@leonardopezadeloÉ isso aí brow, estudar sempre! A minha dificuldade é em memorizar tanto código. Fora que as vezes eu me perco e não sei colocar em prática o que aprendi, como exemplo, o que serve para quê...kkk. Estou fazendo em paralelo ao curso de desenvolvimento web front end, uma facul de TI, aí já viu, muita coisa na mente...
@@marcosf.6203 Eu entreina area de DB, não fazia sentido só saber banco de dados. eu precisava aprender programação também.
Meu objetivo é se tornar full
Topp, quase acabando o curso e consegui resolver todos os problemas que aparecerão
curso bom de mais ✌, bora que é hora de codar mn
Boa Bruno!
Matheus, achei interessante a forma como você colocou o id nos services para ser utilizado como key na iteração, porém, não poderia simplesmente ter feito o map e utilizado o index como key?
bom demais Mestre!!! 👌
valeu Neder!
Matheus, parabéns pela atitude e pelo conteúdo....as msg de validação, mesmo colocando no começo da function, setMessage('') só dar certo quando chamado uma vez, se chamar mais uma vez, a msg não aparece...Tem algum contorno?
Ja resolveu? tenta setMessage(" ")
@@leopoldomoreira1355 já resolvi, obrigado pelo apoio
@@alexsebode1647 Como resolveu?
Conteudo muito bom parabens, mais fique com uma duvida se algum conseguir da uma clareada agradeço. Dentro da function ServiceForm({handleSubmit, textBtn, projectData}){ temos a função - function submit(e) onde temos handleSubmit(projectData), ele está sendo usado como metodo ou como uma props não ficou claro pra mim. desde já agradeço vlw
Esses métodos dentro de métodos é para ser confuso mesmo?
Matheus parabéns pelo curso estou aprendendo muito com ele.
Cara já estou nesta aula há um bom tempo não consigo avançar. Todo o processo de salvar o serviço ocorre sem disparar erros, no entanto os dados não são persistidos no arquivo. Debuguei e vi que os serviços estão chegando, o objeto com o projeto inteiro + serviço também está chegando, no entanto não persiste. Sei que pode ser muitas coisas, no entanto sigo com a esperança que aponte uma direção.
Monitorando até o ponto de submit o objeto project está completo, porém ao analisar a response o project está sem o [serviço].
Quando eu faço envio pelo Insomnia ele consegue persistir no arquivo json certinho.
Consegui resolver... eu tinha digitado "hearders" ao invés de "headers" no fetch().
Estou com erro na hora de aparecer a mensagem de "Orçamento ultrapassado" na função createService().
A mensagem simplesmente não aparece. Eu vi que no console, aparece um erro bem rápido e some. Eu pensei em colocar um setTime talvez, mas não sei se vai resolver. Alguém mais com esta dúvida ou sabe como resolve?
Quem vai chegar no fim do curso? R: EU!!!!! (MARATONANDO) Bora!!!!! (Puxa, só 5 mil chegaram aqui??)
@UCDoFiMhpOnLFq1uG4RL4xag, @Matheus Battisti - Hora de Codar
, no fetch que você fez nessa aula você mandou para o body também, é necessário mandar em um put também? para que serve enviar para um body ?
Eu montei um card dentro de uma tag Link. Isso faz com que ele seja clickavel. Agora preciso colocar um botão dentro deste card. O problema é que o click no botão excuta a ação que foi reservada ao click no card. Como faço para que o botão excute a ação reservada para ele?
Visto
Utilizei a operação de método PUT no lugar de Path, pois estava dando problema no controle de métodos.
eu tbm tive problemas com o verbo path, tbm so consegui alterando para o put
para quem estiver tendo um problema relacionado ao PUSH
todas as palavras que estão como services
troquem para service SEM O S
Mesmo trocando para SEM O S a palavra service, ainda aparece o erro de que "Cannot read properties of undefined (reading 'service') e fala que é no submit function no ServiceForm.js file.
Galera, tudo bem? Preciso de ajuda, estou com o erro "Cannot read properties of undefined (reading 'push')", já faz um tempo que eu to tentando ver e mesmo alterando o services para service não da certo, alguém consegue me ajudar? No serviceForm também coloquei const [service, setService] = useState([]), está tudo ok até aqui, porém, persiste o erro.
Conseguiu resolver? Exatamente mesma coisa aqui...
durante o projeto eu tinha colocado servers ao invés de services ao adicionar o projeto, vê se o erro é esse, uma forma rápida é olhando o arquivo db.json (você já deve ter resolvido, mas fica a dica ai pra outra pessoa kkk)
Galera, tudo bem?
Preciso de ajuda, estou preso nessa aula faz um tempo, já revisei os códigos do Project.js e do ServiceForm.js várias vezes e não achei erros. O console log esta indicando isso: " Uncaught TypeError: Cannot read properties of undefined (reading 'services') "
Eu acho que pode ser um erro de digitação, verifica no db.json (o banco de dados), como a propriedade services está escrita
O meu foi erro de digitação!
Abre o código fonte do professor, copia algumas coisas, vai no seu código fonte e dá um CTRL + F pra poder procurar e ver se está digitando certinho!
:)
Quem poder me ajudar agradeço bastante, estou com um erro a 4 dias e não consigo passar dessa aula "Uncaught TypeError: Cannot read properties of undefined (reading 'push')" isso aparece no console.log ao clicar no botão de "adicionar serviços"
Boa noite o meu deu a mesma coisa só que (reading 'services') , isso faz com que a mensagem não apareça, vc conseguiu resolver?
olá, tive o mesmo erro. Tive que mudar pra 'service'. Pq não tem esse campo 'services' no banco de dados!
@@aldirley Era isso mesmo!
Quando ele vai testar no minuto 14:16 , ocorre um erro no console do meu navegador Uncaught TypeError: Cannot set properties of undefined (setting 'id'), algu[em me socorre pf
Deve ser erro de sintaxe. Tem uns comentários falando disso abaixo.
to preso nisso também
estou tendo um problema com o meu project.cost.
ja reavaliei inumeras vezes e nao consegui indentificar o erro
o meu project.cost esta dando valor null
Também estou com esse problema
Arrumei
fui em ServiceForm.js e na função ServiceForm deixei assim:
function ServiceForm({ handleSubmit, btnText, projectData, type, text, name })
Antes não tinha o type, text e name. Então o db nao recebia esses parâmetros.
Testa aí e vê se funciona. Se n me engano mudei somente isso
@@_Cesaum com certeza foi outra coisa
Cara, não sei se já conseguiu, masss vai em todos os Inputs no arquivo ServiceForm e verifica o name deles, o input number, o name tem que ser cost, ex: name="cost". Acho que isso já resolve.
É só eu que as vezes fica boiando? ou tem gente aí que entende e vai de boa? kkkkkkkkkkkk
É natural... Depois as coisas começam a fazer sentido! Eu acredito que o ideal é simplesmente não parar! :)
Galera estava com um erro de push mas conseguir resolver da seguinte maneira, no
function submit(e) {
e.preventDefault()
projectData.service.push(service)
handleSubmit(projectData)
} essa opção projectData.service esta errado coloque services no lugar de service dessa forma
function submit(e) {
e.preventDefault()
projectData.services.push(service)
handleSubmit(projectData)
}
estou com problema nessa linha de código e fala que não pode dar o push em undefined
projectData.services.push(service);
Amigo, não sei se já conseguiu resolver, mas no meu caso la no NewProject.jsx na função create post, se deve adicionar um array de service dentro do project, no caso vc deve adicionar essa linha antes de fazer o POST em Service: project.services = []
estou com a mesma duvida, conseguiu resolver??? heeelp
Dentro do arquivo Project.js altere o a palavra 'services' para 'service'.
Na função createService():
const lastService = project.services[project.services.length -1]
para...
const lastService = project.service[project.service.length -1]
e por fim
project.services.pop()
para...
project.service.pop()
**COM ISSO IRÁ APARECER A MENSAGEM DE ERRO E JA ATUALIZARA O TOTAL UTILIZADO TAMBÉM.
👍👏✌
valeu Zeriel!
Estou com problema no cost, quando adiciono o lastServiceCost vai como NAN e só adiciona o id em serviçes, já olhei meu codigo com o dele e não achei o erro
cara você conseguiu achar o erro ?
estou a uma semana com o mesmo erro não consegui achar.
Verifica se todos os nomes tão escrito como cost, ou variação ex: Cost, costs, cossts etc...
@@jefersonsantos8762
Aqui ao clicar pra add serviço da erro no id , Cannot set properties of undefined (setting 'id') alguém resolveu?
Acabou de dar isso no meu aqui
alguem conseguiu resolver?
Como no nosso input definimos o value como: value={value ? value : ' '}
Quando eu uso o componente input com o value em branco não me permite digitar no campo!
Alguém para ajudar?
Já consegui resolver. O problema estava justamente nessa verificação, que não precisa ser feita no input pois ele já entende se esse value foi ou não passado para função Input!
Fala galera, mesmo dando o set do message pra '' ele ainda não re-aparece após a primeira alteracao, alguem conseguiu resolver pra ele aparecer varias vezes?
Consegui galera, o comentário de um mano aq ajudou, tem q dar SetTimeout pra zerar a variavel, se nao aparece so uma vez, segue o cod: if(newCost > parseFloat(project.budget)) {
setMessage('Orçamento ultrapassado. Por favor, verifique o valor do serviço')
setType('error')
project.services.pop()
setTimeout(() => {setMessage('');}, 3000)
return false
}
showwwwwwwwwwwwwww
valeu! =D
Cheguei até aqui porém não consigo identificar onde estou errando. Quando insiro um valor de serviço acima do permitido, ou quando clico no botão para adicionar um novo serviço, não atualiza nada. Além disso, o console.log está aparecendo o prototype do Object e somente o ID gerado (não aparece a descrição e valores dos serviços a serem adicionados..) Alguem poderia me ajudar?
Dá uma olhada se você colocou o handleOnChange = {handleChange} no serviceForm em todas as opções do formulario
Verifica tambem se vc colocou o array vazio no userState service
Cara, também tava passando por esse problema, mas depois de uma boa olhada eu vi que tava colocando 'service' no lugar de 'services'. Dá uma checada no seu código linha a linha em busca de palavras que estão incompletas ou erradas. ;)
@@joatancarlos2704 kkkkkkk e eu que escrevi "lenght" e por isso não estava passando o services
conseguiu resolver? estou com o mesmo problema
Olá, pessoal. Por favor, alguém poderia explicar por que na função handleChange o e.target.name vem entre colchetes e o e.target.value não? Tem alguma coisa a ver com a gente já estar utilizando chaves? Segue a função:
function handleChange(e){
setService({...service, [e.target.name]: e.target.value});
}
Obrigado!
ele ta passando um nome e um valor para um objeto ai name é a chave que no objeto é assim { name: value }
@@robertovinicius5837 Valeu, essa parte eu entendi. Minha dúvida é em relação ao uso do colchetes para passar a chave. É passado assim [e.target.name] e não entendi por que tem que ser entre colchetes.
@@robertovinicius5837 ele não perguntou isso
O nome disso é computed property names.
Normalmente ele não poderia usar aquele e.target.name (Que pega o nome do input disparador do evento) como propriedade do objeto por ser uma expressão, no máximo como valor, mas como ele colocou entre colchetes isso se torna possível.
Não sei explicar direito, mas você consegue achar conteúdo sobre isso por esse nome aí que eu dei, tanto no youtube quanto no mdn.
@@pablomoraes4498 valeu! Eu não sabia que isso tinha um nome. Consegui achar mais sobre na MDN, como você sugeriu!
estou com problema nessa linha de código e fala que não pode dar o push em undefined
projectData.services.push(service);
Alguem sabe o motivo?
Dentro do arquivo Project.js altere o a palavra 'services' para 'service'.
Na função createService():
const lastService = project.services[project.services.length -1]
para...
const lastService = project.service[project.service.length -1]
e por fim
project.services.pop()
para...
project.service.pop()
**COM ISSO IRÁ APARECER A MENSAGEM DE ERRO E JA ATUALIZARA O TOTAL UTILIZADO TAMBÉM.
@@emersonnogueira797 valeu bb 😍
Esse é seu problema,vc jogou uma boma perto de pessoas que não entendem tanto de programação,o pior é que vc não sabe 100% das coisas,dúvida?olhe os comentários.
fala brother! não desconte a sua frustração em não aprender nos outros =)
o que uma pessoa que "Não entende tanto de programação", está fazendo num curso de uma biblioteca que envolvem dezenas de conceitos? eu hein xD
@@MatheusBattisti Vc é igual o Cod3r.
frustrado....kkkk
@@diego01manausSim
projectData.services.push(service)
está dando erro nessa linha de código!!! heeelp
da console.log no e, pra olhar qual o problema
Dentro do arquivo Project.js altere o a palavra 'services' para 'service'.
Na função createService():
const lastService = project.services[project.services.length -1]
para...
const lastService = project.service[project.service.length -1]
e por fim
project.services.pop()
para...
project.service.pop()
**COM ISSO IRÁ APARECER A MENSAGEM DE ERRO E JA ATUALIZARA O TOTAL UTILIZADO TAMBÉM.
@@emersonnogueira797 muuito obrigadaaa! deu certo
Visto