Atualizando um Item no Banco de Dados
Atualizar uma Fatura - Etapas Simples
Ao atualizar uma fatura, o processo é bastante semelhante à criação de uma. Veja o passo a passo:
- Criar uma Rota Dinâmica: Crie um novo segmento de rota dinâmica, incluindo o
idda fatura. Assim, informamos ao aplicativo com qual fatura estamos trabalhando; - Ler o id da Fatura: Obtenha o
idda fatura a partir dos parâmetros da página; - Buscar Fatura Específica: Recupere as informações da fatura escolhida no banco de dados;
- Atualizar Banco de Dados: Após realizar as alterações necessárias, atualize os dados da fatura no banco de dados.
Voltar ao Projeto
1. Criar uma Rota Dinâmica
Com base em dados dinâmicos, é possível criar Segmentos de Rotas Dinâmicas quando são necessárias rotas flexíveis. Coloque o nome da pasta entre colchetes para criar uma rota dinâmica. Por exemplo, utilize [id], [post] ou [slug] quando desejar segmentos variáveis na rota.
- Navegue até a pasta
/invoicese crie uma nova rota dinâmica chamada[id]; - Adicione uma nova rota chamada 'edit' dentro da pasta
/invoices/[id]. Inclua umpage.tsx.
Resultado:
Vamos analisar o componente Table em app/ui/invoices/table.tsx. É possível observar que UpdateInvoice recebe o id da fatura.
Acesse o componente <UpdateInvoice /> (app/ui/invoices/buttons.tsx). Observa-se que o id é utilizado como parte do valor de href.
2. Ler o id da Fatura
Insira o seguinte código em app/dashboard/invoices/[id]/edit/page.tsx.
3. Buscar Fatura Específica
Em seguida, importe as novas funções chamadas fetchInvoiceById e fetchSellers.
fetchInvoiceByIdretorna os dados de uma fatura específica;fetchSellersretorna os vendedores para o dropdown do formulário exibindo todos os vendedores.
É possível buscar tanto a fatura quanto os vendedores simultaneamente utilizando Promise.all de forma eficiente.
Vamos testar! Abra a página de faturas e clique no botão de edição (símbolo de caneta). Isso deve redirecionar para o formulário com a fatura já preenchida.
4. Atualizar o Banco de Dados
É necessário enviar o id para a Server Action para atualizar o registro correto no banco de dados. Veja como fazer isso de forma eficaz:
Utilize o bind do JS para passar o id para a Server Action. Isso garante que quaisquer valores enviados para a Server Action sejam devidamente codificados.
Evite passar o id diretamente como argumento na ação do formulário desta forma:
// This won't work
<form action={updateInvoice(id)}>
Em seguida, prosseguiremos com as ações e criaremos uma ação para atualizar a fatura.
Experimente! Após editar uma fatura, envie o formulário e você deverá ser redirecionado para a página de faturas com a fatura atualizada.
Na Prática
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Can you explain how the dynamic route works in this context?
What should I do if the invoice form doesn't prefill with data?
How do I handle errors when updating an invoice?
Awesome!
Completion rate improved to 2.08Atualizando um Item no Banco de Dados
Deslize para mostrar o menu
Atualizar uma Fatura - Etapas Simples
Ao atualizar uma fatura, o processo é bastante semelhante à criação de uma. Veja o passo a passo:
- Criar uma Rota Dinâmica: Crie um novo segmento de rota dinâmica, incluindo o
idda fatura. Assim, informamos ao aplicativo com qual fatura estamos trabalhando; - Ler o id da Fatura: Obtenha o
idda fatura a partir dos parâmetros da página; - Buscar Fatura Específica: Recupere as informações da fatura escolhida no banco de dados;
- Atualizar Banco de Dados: Após realizar as alterações necessárias, atualize os dados da fatura no banco de dados.
Voltar ao Projeto
1. Criar uma Rota Dinâmica
Com base em dados dinâmicos, é possível criar Segmentos de Rotas Dinâmicas quando são necessárias rotas flexíveis. Coloque o nome da pasta entre colchetes para criar uma rota dinâmica. Por exemplo, utilize [id], [post] ou [slug] quando desejar segmentos variáveis na rota.
- Navegue até a pasta
/invoicese crie uma nova rota dinâmica chamada[id]; - Adicione uma nova rota chamada 'edit' dentro da pasta
/invoices/[id]. Inclua umpage.tsx.
Resultado:
Vamos analisar o componente Table em app/ui/invoices/table.tsx. É possível observar que UpdateInvoice recebe o id da fatura.
Acesse o componente <UpdateInvoice /> (app/ui/invoices/buttons.tsx). Observa-se que o id é utilizado como parte do valor de href.
2. Ler o id da Fatura
Insira o seguinte código em app/dashboard/invoices/[id]/edit/page.tsx.
3. Buscar Fatura Específica
Em seguida, importe as novas funções chamadas fetchInvoiceById e fetchSellers.
fetchInvoiceByIdretorna os dados de uma fatura específica;fetchSellersretorna os vendedores para o dropdown do formulário exibindo todos os vendedores.
É possível buscar tanto a fatura quanto os vendedores simultaneamente utilizando Promise.all de forma eficiente.
Vamos testar! Abra a página de faturas e clique no botão de edição (símbolo de caneta). Isso deve redirecionar para o formulário com a fatura já preenchida.
4. Atualizar o Banco de Dados
É necessário enviar o id para a Server Action para atualizar o registro correto no banco de dados. Veja como fazer isso de forma eficaz:
Utilize o bind do JS para passar o id para a Server Action. Isso garante que quaisquer valores enviados para a Server Action sejam devidamente codificados.
Evite passar o id diretamente como argumento na ação do formulário desta forma:
// This won't work
<form action={updateInvoice(id)}>
Em seguida, prosseguiremos com as ações e criaremos uma ação para atualizar a fatura.
Experimente! Após editar uma fatura, envie o formulário e você deverá ser redirecionado para a página de faturas com a fatura atualizada.
Na Prática
Obrigado pelo seu feedback!
