M4#A101 Problema para passar state pelo Link

[Peddnator]

Boa Noite!

Estava seguindo a Aula 101 e tive problema para passar o state pelo component Link do react-router-dom. Ele passa corretamente todas as outras informações , porem o state vem como undefined. No meu projeto estou utilizando typescript para acompanhar as aulas, eu realizei algumas verificações para um possível problema de types, porem todas elas resultaram no mesmo undefined. Tentei também utilizar o hooks do react-router-dom, mas o resultado foi o mesmo. Gostaria de saber aonde estou errando. Subi meu projeto nesse repo : https://github.com/Peddnator/react-zarriaMD4101

PS: Caso o Typescript for um problema poderia me passar algum material de referencia, para tentar entender o erro.

@fdaciuk

[fdaciuk]

Oi @Peddnator! O problema é que a página está sendo recarregada, aí a informação de state da history não passa pra frente mesmo, já que com o reload da página a memória é resetada (e o estado da history é passado via JS, ou seja: fica na memória).

Esse problema acontece por causa desse componente aqui: https://github.com/Peddnator/react-zarriaMD4101/blob/main/src/pages/choose-pizza-size/choose-pizza-size.tsx#L47

Você está dizendo que o Link deve renderizar um outro componente (CardActionArea), e esse componente possivelmente é um <a> que faz esse full reload na sua página.

Deveria ser o contrário: você precisa usar o CardActionArea e dizer que o componente que precisa ser renderizado é o Link.

Dá uma olhada no código do projeto aqui no GitHub, que vai ficar mais fácil comparar seu código com o que foi mostrado na aula =)

[Peddnator]

Era isso mesmo!! Muito obrigado! Acabei ficando com mais uma duvida, inicialmente eu havia invertido deixando Link importando CardActionArea, pois estava dando um erro de typescript mas isso resultou no problema. Procurei um pouco para ver um metodo para deixar como estava repo da aula. Cheguei neste trecho de codigo: <CardActionArea {...{ component: Link, to: { pathname: "/pizza-flavours", state: pizza } }}> Funcionou, porem não consegui entender a sintaxe do {..{component: link}

[fdaciuk]

Oi @Peddnator! O ideal seria entender o pq o TS estava reclamando, mas essa sintaxe é chamada de spread props: basicamente você está espalhando as propriedades de um objeto, criando um novo objeto.

Quando usamos spread props no JSX, todas as propriedades do objeto são passadas para o componente como props.

Então isso que você fez:

<CardActionArea {...{ component: Link, to: { pathname: "/pizza-flavours", state: pizza } }}>

Seria o mesmo que:

const props = { component: Link, to: { pathname: "/pizza-flavours", state: pizza } }
<CardActionArea {...props}>

E que irá resultar em:

<CardActionArea component={Link}  to={{ pathname: "/pizza-flavours", state: pizza }}>

Ficou claro? =)

[Peddnator]

Sim, ficou bem claro! Obrigado!

[fdaciuk]

Show! Qualquer dúvida, só avisar =)