Pressionar o botão de detalhe aqui nos itens do pedido deve expor todos os itens que temos e, para isso,
quero usar o item do carrinho aqui.
Uma maneira de fazer isso é manipular algum estado interno aqui com a ajuda do gancho de estado de uso que importamos do
React, onde controlamos se estamos vendo os detalhes no momento ou não. Então, vou nomear os detalhes do programa e definir
os detalhes do programa aqui e inicializá-lo
com o estado de uso como falso, para que não mostremos os detalhes inicialmente e agora,
quando pressionamos este botão aqui, é claro que desejo alterar esse estado. Então nessa função, chamarei set show details e basicamente invertemos
o valor, para isso usamos a sintaxe especial onde passamos uma função para essa
função de configuração de estado aqui, onde obtemos o estado anterior e retornamos um novo estado com base nesse estado anterior
e aqui, lembre-se de que
o estado anterior é realmente falso ou verdadeiro, dependendo dos detalhes do programa, portanto, aqui
não retornarei um estado anterior para converter isso; se fosse falso, retornarei verdadeiro como um novo
state, se for verdade, retornarei false como um novo estado e configurarei isso para mostrar detalhes.
Agora, podemos usar essas informações aqui para produzir algum conteúdo condicionalmente. Podemos verificar os detalhes do show e, se isso for
verdade e agora essa é a nossa sintaxe React, podemos usar aqui; portanto,
se isso for verdade, retornamos essa visualização aqui. Pode parecer estranho no começo, mas com isso estamos dizendo se isso
é verdade e isso é verdade e este é um atalho para o Javascript verificar se isso é verdade, bem,
isso sempre é verdadeiro porque este é um objeto no final. isso será processado, é
assim que o Javascript funciona.
A alternativa seria uma expressão ternária ou uma variável que você configurou aqui e que você altera com um
if check e depois sai lá em baixo.
Então, eu vou usar essa expressão inline aqui, onde eu mostro essa exibição se show details
for true e, nessa exibição, quero exibir todos os itens.
Portanto, nessa visão, terei uma saída dinâmica, na qual examinarei todos os meus itens que
espero obter nos itens prop deste componente do item
do pedido e, aí, podemos mapear nossos dados em uma lista de elementos jsx, em um lista de componentes.
Portanto, aqui, é claro, recebo meu item de carrinho no final, porque os itens em um pedido são apenas os itens que tínhamos no carrinho, então o map executa essa
função em cada item do carrinho, por assim dizer, e nos fornece esse item do carrinho que ele está procurando e
Agora, para este item, temos que retornar um novo elemento jsx que queremos gerar e é aí que eu uso
o meu item do carrinho para produzir isso.
Então, aqui, eu mostro o item do carrinho como, não o carrinho, mas o item do carrinho como este. Agora, o item do carrinho, se você der uma
olhada, tomou a quantidade e o título como entradas e também queria a quantidade.
Além disso, tínhamos o botão excluir lá, que eu não quero no item do pedido, por
isso temos
que fazer algo a respeito, mas vamos nos concentrar na quantidade, título e quantidade no momento e repassar esses dados.
Então aqui, a quantidade é cartItem. quantidade, quantidade é cartItem.
e lembre-se agora de que tudo o que armazenamos aqui em pedidos, em itens, é no final o que obtemos como itens
aqui em nosso redutor de
pedidos, e o que obtemos em nossa ação. Então, nós colocamos nossos itens no carrinho e,
se dermos uma olhada na tela do carrinho e ver o que passamos lá, em seguida, para adicionar ordem, passamos nesse carrinho itens
constantes que mantêm essa matriz que geramos aqui no final .
Então, no final, temos uma série desses objetos lá, então temos
o título do produto, o preço do produto, a quantidade e a soma lá e é com isso que agora
podemos trabalhar aqui no item do pedido onde eu crio meu carrinho itens, passo no cartItem. quantidade, pela quantidade, passo
no cartItem. sum e last but not least, no
item do carrinho, também precisamos do título, para que seja cartItem. productTitle o que eu passo aqui.
Agora, o problema restante, como eu disse, é que um item de carrinho tem este ícone tocável aqui para
excluí-lo, isso só faz sentido se usarmos esse componente dentro de um carrinho, não
quando o usarmos dentro de um pedido que queremos exibir, o que é é claro, somente leitura.
Portanto, a solução é que aqui no item do carrinho, envolvemos isso e simplesmente esperamos obter um suporte que diga, por exemplo,
deletável e, somente se isso for verdade, mesmo atalho de
um segundo atrás, produzimos essa opacidade palpável, portanto esse ícone
em geral,
caso contrário, não o fazemos.
Portanto, agora temos esse acessório deletável no item do carrinho que precisa ser definido para mostrar o ícone da lixeira.
Isso significa que, na tela do carrinho em que queremos ter esse ícone de lixeira, quando usamos o item do
carrinho, precisamos definir o deletável e defini-lo da maneira que é suficiente, isso
o define como verdadeiro e nós o mostraremos. Por outro lado, no item do pedido
em que também uso o item do carrinho, não defino deletável e, portanto, não renderizamos
esse ícone de lixeira. Então, vamos dar uma olhada
nisso, vamos salvá-lo e vamos adicionar esses itens ao carrinho, pressionar
o pedido agora e depois ir para os pedidos, clicar em mostrar detalhes e eu recebo um erro, o mapa de
itens adereços não pode ser chamado porque indefinido é não é um objeto.
Uma razão para isso é que estou tentando percorrer todos os meus itens aqui no item do
pedido, mas na tela de pedidos, nunca estou definindo os itens aqui.
Portanto, na tela de pedidos do item do pedido, além de transmitir a quantidade e a data, também
precisamos passar os itens para o item do pedido que estamos produzindo e que, é claro, podem ser recebidos ou
obtidos com o itemData. item que é um pedido único
e agora, se dermos uma olhada no modelo de pedido, teremos essa propriedade de itens aqui. Para que possamos
acessar. itens aqui e agora
passamos os itens para o item do pedido e, portanto, agora também podemos produzi-lo lá.
Então, agora, se você tentar mais uma vez e fizermos um novo pedido aqui e simplesmente darmos uma olhada nisso, agora
isso funciona, temos um problema com a chave aqui, que corrigiremos em um segundo.
Antes de tudo, vamos tentar isso também no Android, clicar em fazer pedidos agora, depois fazer pedidos,
mostrar os detalhes, receber o mesmo aviso, mas escrevi que geralmente funciona, mas seria bom se esses itens de pedidos fossem um
pouco mais amplos então isso também é algo que eu quero corrigir. Portanto, para corrigir esses erros que temos, o aviso
decorre do
fato de que aqui estou mapeando meus dados nos componentes React e, se fizermos isso manualmente com o mapa
aqui, precisamos atribuir esse suporte principal, que é um requisito básico do React que você deve
também terá no React for web.
Então, aqui, você precisa apontar para um identificador exclusivo e cada item do carrinho aqui no final tem um ID do
produto que podemos usar e você pode confirmar isso na tela do carrinho, onde cria esse
conjunto de
itens no carrinho, lá armazenamos esse ID do produto e que será exclusivo por linha, então tudo bem.
Agora, com relação à largura disso, podemos adicionar um estilo aqui, detalhar itens por exemplo e adicioná-lo ali na folha de estilo e
aqui, simplesmente certifique-se
de definir uma largura de 100%, a fim de usar toda
a largura disponível para o itens de carrinho. E agora, se fizermos outra tentativa e pedirmos isso, e então formos
para a tela de pedidos
e mostraremos os detalhes, agora parecerá o que deveria parecer e agora poderemos ver os detalhes
e ocultá-los, uma pequena melhoria talvez seja
essa o texto deve ser atualizado; portanto, quando visualizamos os detalhes, isso deve dizer ocultar
detalhes e não mostrar detalhes e, claro, que também é fácil de implementar em itens de
pedido, temos esse botão, basta definir esse texto dinamicamente e verificar se mostra detalhes que é nosso estado interno
aqui são verdadeiros.
Se for esse o caso, então aqui quero dizer detalhes de ocultação, caso contrário, direi mostrar detalhes e agora
esse texto deve mudar dinamicamente conforme mostramos ou ocultamos nossos detalhes.
Portanto, se encomendarmos uma última vez aqui, vamos dar uma olhada
nisso, agora são detalhes do programa, agora são detalhes
do oculto, então agora isso realmente funciona da maneira que deveria funcionar.
Agora, vamos também fazer outro pedido, apenas para confirmar que isso realmente funciona. Se fizermos o pedido aqui, vamos para
a tela de pedidos, agora você também verá o segundo pedido e poderá controlá-los independentemente.
Portanto, esta é a tela de pedidos e como podemos enviar pedidos para lá e como podemos reutilizar o item do carrinho aqui.