Resumo da Transcrição

Então, agora a gente vai mudar esses propriedades, o valor dessas propriedades da imagem do texto para ser esses aqui. Porque o item, o objeto item mudou as propriedades, porque agora a gente está olhando nas propriedades que de cada item que foi servido pela API da Microsoft, e se você olhar o objeto de cada item, tem esse nome aqui, nem a gente vai usar para ser descrição da imagem, e também tem esse thumbnail URL que vai ser a imagem, a própria imagem, se você copiar e colar aqui, vai ser essa imagem do cachorro. É só nota que é a gata de TPS. Agora, vamos mudar em vez de item.RL, item.thumbnail. E no texto vai ser o neio para descrição. Então, vai dar conta desse componente. Só se lembre que a gente está destruturando o item que está dentro do props, na verdade, o argumento aqui é props, mas dentro do props tem o item, então a gente extrai o item assim. E vamos voltar ao componente aqui. No componente imageless, a gente dá um render row, cada item é renderizado como um componente imageless item, e a gente passa com a propriedade o item aqui. O item aqui, ele vai dar um loop para cada item dentro do data source, e vai fazer esse componente. Note agora que aqui é item.id, mas a gente não tem mais id. Se você notar aqui, não temos mais id, mas temos image id. Então, vamos usar esse aqui para identificar o nosso item. É só isso por isso. Mas se você salvar, assim, vou colocar aqui o soft wrap para você ver tudo. Se você salvar, você vai ver que ainda não funciona, né? Não aparece nada. O problema aqui é se você voltar para o index, então a gente tem um imageless aqui, a gente dá como propriedade os itens, que estão armazenados no estado, como propriedade item. Mas o problema é que, inicialmente, os itens são um array que está empty, né? Então, inicialmente, não vai ter nada. E só quando dá o component.goMount, quando esse componente está prestes a montar, vai fazer um pedido aqui para API. Mas como todo pedido demora um pouquinho para processar, manda para o servidor, pega a resposta, vai demorar um pouco. Então, até lá, o componente já vai estar renderizado. E por isso não mostra nada. O que a gente deve fazer, então? Então, a gente tem que ir no component.imgless e mudar umas coisas aqui. Porque ele vai renderizar isso, mas só está inicializando os dados quando o componente é construído via construtor. O que a gente vai fazer é quando essa propriedade que é dada a imagelessItems for mudada, que vai acontecer quando dá o setState aqui, né? Inicialmente, esse cara vai ser vazio, né? E quando dá o setState, vai popular esse array com manyThings, os objetos, né? Então, tem uma maneira de fazer o componente renderizar de novo quando receber novas propriedades. Vamos voltar ao imageList e vamos criar essa função component. We'llReceiveProps. Ah, bom. Essa função é chamada toda vez que esse componente, que é o imageList, receber novas propriedades. O argumento aqui vai ser o nextProps, que vão ser as novas propriedades que serão dadas ao componente. O que a gente vai fazer? Primeiro, a gente vai checar se os itens anteriores, the props anteriores não forem os mesmos. Se não forem os mesmos, a gente vai atualizar a lista, vai renderizar. Fazer isso, vamos dar um comparação aqui. Se forem os mesmos itens, eu recebo novas props, mas os itens são os mesmos, eu não preciso renderizar de novo, então eu não me importo. Vamos fazer se vamos fazer assim. Se os itens do nextProps não forem iguais ao propriedades. A gente vai mudar porque isso foi igual, não me importo. O que a gente vai fazer? Tem um problema aqui nesse cara aqui. Inicialmente a gente tinha assim que está criando esse objeto ListViewDataSource. Depois a gente settle state com o clone with rows. Mas o que a gente vai fazer agora é fazer isso aqui. Em vez de só uma vez no construtor a gente vai fazer cada vez que recebe novas propriedades recebe novos itens. A gente vai atualizar o state e setar o data source com novos itens. Então vou remover isso aqui. O que eu vou fazer é eu vou deixar o data source aqui e a gente vai mover isso aqui pra cá cada vez que tem novos itens e vamos clone our throws pra atualizar o data source. Mas pra fazer isso deixa eu só mudar o nome aqui pra ficar se eu mudar pra esse fica assim. E como é i s6 s6 não precisa fazer isso se tem o mesmo propriedade, tem o mesmo nome que eu falou eu posso tirar isso. Então aqui o que eu vou fazer? Vou fazer setar o state e vou mudar o data source pra o que? vai ser o state, data source com o clonor rows do que? do next prop com o items. Ok Ok, deixa eu se notar aqui, funciona o ah? Demora um pouco mas funciona o só avisar isso ok? Então essa função que é chamada component component will receive props é chamada toda vez que esse componente recebe novas propriedades e essas novas propriedades são armazenadas nesse argumento da função chamada next props. Primeiro a gente checa se os itens das próximas propriedades não forem iguais porque se for igual a gente não precisa se preocupar mas se for diferente a gente precisa atualizar a lista né? Então o que a gente faz? A gente seto state pra o data source pra ser o data source antigo exceto que a gente vai com clonor rows os novos itens então vai mudar primeiro inicialmente vai estar sem nada né? A gente lembra que vai estar sem nada vazio e quando a gente fazer o pedido pra api aqui vai ser setar o state do itens que são dados a propriedades esse cara vai mudar né? Ops Tira esse e vai atualizar o data source destaque atualize aqui demora um pouquinho então quando o programa inicializa faz aquele pedido de HTTP pro back end da Microsoft demora um pouquinho e quando o pedido for aceito e a resposta dada pra gente a gente seto state que muda esses itens mas os itens são a propriedade da image list que como foro dado na propriedade da next props e seto state do data source com os novos itens e aqui tá funcionando tá bom? nos passos vídeos a gente vai implementar o clique pra clicar aqui e pra outra cena e mostrar a imagem tão maior