00:00
好了各位啊,在实现了发送请求之后啊,我们琢磨一下github给我们返回的那些数据呀,是什么意思?你把那数据结构分析明白了,我才知道怎么展示用户的信息,对吧?来吧,同学,输入关键字艾特硅谷,点击搜索。稍等他会把信息给咱啊,虽然有的时候有点慢啊,慢慢等一会儿就好了啊,来点开走同学,首先琢磨一下,你目前控制台上所看到的这些东西啊,就是github服务器给你返回的,首先我们说第一个啊。Completepl什么意思呢?啊,或者叫complete,叫做完成的in completeple results什么意思呢?是github再告诉你本次给你返回的结果是否是完整的结果。它false啥意思呢?不是完整的说,老师github为什么给我返回的值,它不是一个完整的结果呢?同学,是这样的,在github上跟at硅谷相关的东西太多了,它不能一下子都给你啊是吧,那给了我多少个呢?在这里呢,It括号30个,那一共有多少个呢?在github上跟艾特硅谷相关的用户有多少个呢?偷偷COUNT207,如果呢,你再搜一个别的,你比如说呢,哎,搜我的名字啊,天宇啊,你像我这名吧,就属于这这很多人都用是吧?哎,这这什么王天宇李天宇是吧?哎,好,点击搜索走,这时候你看啊同学。
01:31
稍等会儿啊。哎呀,这个慢。朱老师到这请求到底发还是没发呀,现在已经回来了,同学等你练习的时候,你可以这么的,你借助network这个选项卡,你一上来呢,先把东西都清掉,都清掉啊,你刚才是不是搜索,哎天宇这个你再换一个,你比如说搜索一个什么呢?搜索一个张三好,你点击搜索走,你看这显示PA定,PA定啥意思啊,正在执行中,200啥意思,回来了,你再回头这看,诶就有了是吧?同学们你看在githup上跟天宇相关的用户那非常多是吧?哎,跟张三相关的呢,哎,在这儿是吧?哎,好了,咱们研究一下啊同学,这个代表是不完整的数据,下边的total代表一共有多少个,那这个items呢?那就是一个一个一个一个用户的信息返回给你30个索引值,从零到29的对吧,打开一个用户给他研究明白了,咱就知道那些用户也都啊属性是干嘛的,对不对?好这个同学来直接说a vita ul什么意思啊,Vita ul这叫用户头像地址,哎用户头像地址你比如说你把这地址。
02:36
啊,复制复制来到浏览器里边地址栏里,敲上去回车,你看这是一个用户的头像,对吗?哎,叫A维塔URL同学,如果你细心的观察生活中的一些事情啊,你不难发现,其实A维ta是谁呢?之前有电影叫阿凡达,大家看过吧?A维塔是不是那个阿凡达电影的英文名字呀?啊,那你知道为什么很多的系统把用户的头像都用vita URL去做标识吗?
03:03
对吧,他为什么不用别的呢?比如说叫做picture ul或者等等叫别的为什么就非得叫A呢?啊,其实你自己呢,下去可以查一下,简单说啊,就是啊维体这个东西呢,本身就有这个什么神灵这个意思,你比如说阿凡达他不是人对吧,但是它是人的这么一个化身是吧?哎,所以说有一种感觉,人在网络上冲浪啊,网络上的人呢,也不是真实的人啊,但是是一个具体人的化身,所以说就用了A维ta,哎,就简单聊一下啊,哎,不说那么多的废话了啊a vita ul,什么用户头像地址,我们要这个不要不要这个,这玩意儿怎么展示啊,对吧,好了,说老师,那这么多东西我还用哪个呢?同学,咱不能一个一个说,或者说有些东西说了也没用啊,啊叭叭叭叭叭叭说了这么多啊,然后告诉大家,其实一点用都没有,我们也不用,所以说咱就捞肝火,说这个是我需要的头像地址,还有就是同学你觉不觉得每个人登录名是不是得展示出来?对吧,那登录名是哪呢?这儿呢叫login,哎叫login说老师那还需要什么呢?我说一下,点击一下这个头像呢,会来到这个人的个人仓库地址,那你看一下啊,咱们之前那个写好的那个动态图演示这个案例的,你看一下啊,搜索输入JS点击,你等会儿是不是出来这人了,你随便点一个人就能来到这个人的仓库地址啊,或者说来到这个人的主页啊,当然他这个动画里呢,他又搜索了一次啊,又搜索ES行,咱再等等。
04:28
哎,你再去点ES啊,随便找一个人点呀,快点呀啊哎,他还不点了是吧,那可能没录这个啊,那好了给这关掉吧啊那说一下就是点击之后你得来到这个人的个人主页来啊,直接说这个头像这个呢是名。这个就是他的个人主页,哎,就是githu上你的个人主页,我们需要的是三个东西,同学们分别是什么来着?A ul htmll,还有login OK,那你说接下来怎么办?同学,你觉不觉得你的search组件,你的搜索组件已经完成了它的使命,获取了用户输入,拿到了真正的返回的数据,接下来呢?
05:15
同学,红色的是什么组件呀?是不是search组件?Search组件搜索回来的东西要交给谁进行展示啊?是不是list呀,对吧?哎,同学,那我问你啊,Search搜索回来的东西要交给list进行展示,是不是他俩是兄弟组建呀?那么兄弟之间是不是又要进行数据的沟通了呀?那同学,以目前咱们的知识量,兄弟之间能直接进行沟通吗?不能,那咋办?哎呦喂,没办法的办法,同学是不是得借助他们共同的父亲search组件来?这橙色的是谁呢?橙色的是APP search组件搜索出来的结果要交给谁APP?
06:03
那么search交给APP,是不是子交给父,子想给父传点东西,那就得要求父当年给子传一个函数,子在合适的时候调用这个函数,是不是就把东西给APP了?那么APP跟list又是父子关系,APP是不是就给list了?那是不是就完成了一个数据的交互呢?好,那我们就开始写呗,同学,那来吧,所以说综上所述,搜索出来的这一堆用户啊,你说得交给谁才对呀,是不是得交给APP呀?啊,那所以说呢,你就得去APP里边初始化状态啊,那走着,哎,State同学,我倒想放在search里,放在search里你怎么交给list嘛,对吧?哎,那跟之前不是一样的吗?User思一上来是个空数组,对吧?写好注释初始化状态啊,User斯初始值。
07:03
为数组。OK,同学,那你说咱说状态在哪儿,操作状态的方法就在哪儿,那你说同学在APP这个组件里边,我是不是得定义一个方法叫做save users,它得是一个函数,你得给我一堆user。然后呢,我接到一堆user司之后,我就set state,我就往里边放对不对?User司值呢?我接到的user司,那你说是不是一个名呢?是不是简写了?同学,这个就是APP里边更新user的方法,你得把这save users给谁呀?是不是给search对吧?这不就是刚才我们图里边所表现的负得提前给子传个函数,传没传函数传了好了,那同学谁就能收到search search收到之后,同学如果你的请求是成功的,那别做这种无聊的事好不?那你应该怎么办呀?是不是this.prop点,然后呢,Save user司,然后呢,把users传过去,那一堆users在哪呢?response.data拿到真正GI up给你返回的数据,那个it里边是不是一堆用户啊啊,你瞧一下同学看it是不是一数组,数组里每一个对象是不是都是一个用户,OK,那所以说你得这么做,你觉得嘞,是吧,哎,说老师那失败了。
08:25
咱先不考虑这失败了嘛,对吧,咱就看看我搜索回来东西之后,到底能不能把用户存进去,刷新一下页面,借助开发者工具走起,点击APP刚开始上来是不是没人啊,来现在搜索搜索艾特硅谷点击搜索走起,现在得等着啊,因为它不会那么快的,你看一堆用户是不是回来了,同学,那你还等啥呢啊,一堆用户回来了之后。那你说APP存着users有啥用啊,它的目的不是交给list做展示吗?对吧?this.state users对吧?啊,然后呢,你其实也可以提前,哎,咱说给它取好对不对?this.state谁呢?User丝哎,那这呢就简单了,Users是吧?来到list里边来吧,同学分析一下list里边list是整个人的列表对不对?这一个人,这一个人,这一个人这一个人这一个人是吧?同学我要这么多干嘛呀,从这到这儿的这些删了去,我留一个结构是不就行了,那我到底有几有几个这种结构,我是不是得看传过来的users有多少个呀?那所以说我得遍利谁呀,this.pro.user司然后呢,是map啊,我拿到的每一个都是一个user o BJ,我为啥非得带着这个OBBJ让你明白。
09:51
拿到的每一个是user对象,然后return对吧,那啥呢,我得return呢,这么一堆结构是吧。
10:01
走啊,那么这么一堆结构里边,同学这是什么呢?就是那人的名字,那所以说别写react.gs别写死啊,你得写user o BG点哎,叫啥来着login啊好,同学往这看,这是不是用户头像的地址啊,那给它删掉,这呢给它删掉不能写死啊,那写啥呢?走叫做user OB BJ点哎,那东西大家还记得吗?啊,是不是叫A塔ul,如果你觉得记不住,那你就来到这儿复制一下,嗯,回到这儿走A没复制过来是吧?啊,在这儿选中CTRLC来到这走A塔ul,好,那这是哪呢?A标签里边那个地址,就是你点完了之后那个人的个人主页在哪儿?那所以说就是user OB BJ点哪呢?打开一个人呗,看看叫HTMLURL复制走是吧?OK,那这回咱瞧瞧效果啊来。
11:02
一上来肯定没有用户对吧?哎,先这么写着,没用户,那搜索一下吧,比如说有个艾特硅谷点击搜索,我还没点呢,没点呢,可能网络比较慢,所以说我切到network这一块,好吧,我切到这,我把该清的呢都清掉,来点击搜索PA丁正在执行等着,诶同学你看数据是不是回来了,而且东西是不是也做展示了呀,你别急,控制台不干了呀,每一个孩子应该有一个唯一的A同学,咱之前聊过key这个问题,对不对?所以说呀,同学回到代码当中,你要给最外侧的那个结构加上key,你别给里边加没意义,得是最外侧那个结构,得是这说老师那这也是最外侧,不对,你得加在map便利的这个最外侧结构,OK,哎,等于什么呢?别用index,每一个用户他其实还有一个信息,你可以打开这个东西看一下开发者工具有一个什么呢?叫ID,这ID肯定是啥唯一的,那所以说可以用这个ID呢,作为他的唯一的key,好了,那这回呢就没问题了,来找。
12:02
整体刷新一下啊,搜索什么呢?搜索我的名儿吧,啊田宇点击搜索。等着,哎出来了是吧?哎,都在这儿呢,哎,其实这不就是我的get up这个是吧?哎,这头像吗?在这儿呢,好了,那控制台呢,也没有警告的是吧?哎,同学,那你说我是不是可以展示数据了呀,但是你的东西呢,还有一点点小小的不完善,同学,你就比如说这来我一刷新,这一上来,人家是有个欢迎词的,对不对,一会儿咱再说,而且你搜索的过程当中是没有loading加载中那个提示的,你比如说我搜索一个李四,同学你看点击搜索用户说哎呀,这咋的了啊是吧,你应该给人家一个提示loading在那转圈对不对?哎,好,但这小节呢,我们先停一下,这小节我们确实完成了什么呢?数据的展示,一个基本列表的展示,OK,哎,好了,视频呢,停一下。
我来说两句