Resumo do Transcript

Vou criar uma função aqui. Vamos chamar... Des, atualizar info. Vamos botar aqui, atualizar... Tuariza info. Criar essa função do componente. Quando eu clicar, vai chamar aquela função. Cliquei. Vamos pôr um console log aqui. Para ver se está funcionando. Atualizar info foi chamado, vai mostrar... Quando eu clicar. Vamos voltar para o browser, para o navegador, para ver... O debug aqui se vai aparecer. Cliquei. Atualizar foi chamado, está funcionando aqui. Aqui. Mas tem um detalhe. Vamos... Tem um detalhe aqui, tem que usar um bind. Se você usar a keyword, a palavra-chave-des, dentro dessa função. A gente vai falar disso depois, quando o problema aparecer. Então, vamos comentar isso, ou deletar. E vamos fazer a chamada para o back-end. A gente vai fazer isso já no comando o fat. Tá bom, a função fat. Se você quiser ir na documentação do React Native, está no networking aqui. Aqui, networking. Aí, usem fat, né? Aí, usem fat, né? Vamos usar o fat para fazer uma get. O padrão é get. Então, a gente vai botar primeiro, qual é o local que a gente do servidor. Vamos copiar onde é que o Jason sir está. Essa aí é o URL, né? Vamos pegar uma pessoa especificamente, vamos pegar a pessoa com o João aqui. Slash one, né? Se você pôr um, barra um, vai para o João só. Aí, vou usar só o João, nesse exemplo. Aí, é o link. Tá bom? Aí, vai fazer um requerimento get request. A gente tem que... O fat vai retornar uma promise, uma promessa do JavaScript. A gente tem que handle the promise. A gente tem que lidar com a promessa. Gente, a gente faz isso com o Dan, né? Fala Dan. Aí, vou botar aqui response, que é resposta. O que é que eu vou fazer? Eu vou mudar essa resposta para um objeto de JavaScript. Fazendo assim, response, Jason. Tá bom? E isso aqui também retornar uma promessa. Então, eu tenho que usar o Dan de novo. Vou mudar aqui para outra linha. Tá bom? Botar outro Dan. Se aqui response. Jason. Vou botar... O que é que eu quero fazer quando eu pegar as informações? Vamos console-ov? O response Jason para ver o que é. Então, vamos deixar isso aí e ver o que acontece. Quando eu clico atualizar, volta para o navegador no seu debug. Vamos clear aqui. Clico atualizar. Olha o que aconteceu. Ele foi no back-end, pegou a informação e retornou aqui. A gente deu o console-log no response Jason, que é um objeto. Entendeu? Esse objeto tem o ID, a idade e o nome que é o João. Então, está tudo certo. Um objeto do JavaScript. O que a gente vai fazer com o objeto? A gente vai setar o estado. Então, vamos lá. Vamos comentar esse negócio. Vamos comentar esse negócio aqui. Vamos setar o estado. Como é que a gente muda? Desce set state, né? E dá o objeto com as coisas que você quer mudar. Nesse caso, eu vou mudar o nome para response Jason.nome, né? O response Jason é um objeto que tem essas chaves. ID, nome, idade, avatar. Então, vamos botar. A idade, response Jason, idade. Uavatar URL, response Jason. Avatar URL. Está aí. Então, vai mudar o estado quando eu clicar. Tá bom? Mas eu acho que a gente vai ter um problema agora. Então, vamos ver o que vai acontecer. Eita, o que é que aconteceu? Não mudou nada, né? O que é que tem um problema aqui? Vamos ver esse negócio. Nada acontece? Por quê? E se você ver aqui, no debug, vamos clicar lá. E fala, this set state not a function. Falando que não é uma função. Ele não sabe que é isso. O problema aqui é na palavra-chave, this. Tá bom? Porque no contexto dessa função atualizar, o this e dentro desse fet aqui, o this, não é o componente segundo o projeto. Não é. Para você ter uma ideia de o que é, você pode falar com o solo, this aqui. E vamos ver o que é o this no contexto lá. Vamos ver o que é. Olha aí. O this parece que é o botão, né? É o botão. Quando você tem esse this dentro dessa função aqui, mas ela foi chamada do propriedade do on-press, do Totable Highlight, que é o botão. Então, o this é esse componente, mas tá errado, né? A gente quer se referir ao this, como se fosse o objeto, o componente segundo o projeto. Para fazer isso, a gente põe o bind this. Aqui no on-press, põe o bind this. Nesse caso, você tá mudando o contexto dentro da função. Quando você se referir ao this, vai se referir ao objeto, ao componente segundo o projeto. Porque nesse contexto aqui, o this, nesse contexto todo aqui, se refere ao segundo o projeto. Então, tem que fazer isso, senão não vai funcionar o set state. Porque tá tentando setar o state aqui, do componente do botão, que não faz sentido pra gente. Então, vamos consolar o this de novo com o bind. A gente adicionou o bind this. Vamos ver no blog aqui. Clicatualizar, olha aí. Agora a gente recebeu o segundo projeto, o componente, quando a gente deu o consolo. Tá bom? Não se esqueça de pôr sempre o bind this. Nesse caso, pra setar, determinar o contexto da palavra chave. Então, vamos remover isso. Se você esquecer disso, sempre ponha o console log this pra entender o que é o contexto, o que é realmente que o this se refere. Agora vai funcionar. O this aqui se refere ao segundo projeto, o componente, né? Vamos lá. Vamos ver o que acontece aqui. Vou ver esse aqui. Vamos atualizar. Aí, clica atualizar. Olha aí. Nome é João, idade 27, agora tem uma imagem. Legal, hein? Pôr no back end. Nesse endereço. Converteu aquele JSON, que era o sol texto, pro objeto e retornou outra promessa, que foi lidada com esse den, outro den. E esse cara aqui é um objeto JavaScript. A gente usou esse objeto, os propriedades dele pra setar o nosso estado do segundo, do componente segundo projeto que tá aqui. E isso como está linkado, está ligado ao textos aqui via o estado, apareceu aqui. Tá bom? Isso como se usou FAT pra fazer um GET, GET request. Vamos remover esse negócio aqui só pra terminar. Eu vou mudar esse nome, iniciar pra nada, idade, eu vou botar NULL. E o que acontece? Inicialmente não tem nada, né? Mas é quando clicar atualizar, aparece. Nada, tá aí. Tá bem? Muito obrigado por assistir o vídeo. Se você gostou, pra você subscrever, deixe comentários, perguntas. E na próxima, a gente vai explorar mais essa função FAT pra fazer outro tipo de request. A gente aprendeu a usar o GET pra pegar a informação do servidor, a gente fez um simulom back-end usando o JSON server, módulo do node muito útil. Tchau.