27_尚硅谷_练习2_用户搜索_交互.avi原创

那现在你说我点击能搜索吗。还没有做对吧。真的不好。现在有个问题啊，有个什么问题呢？我们肯定是要去发请求，去获取对应的数据的吧，关键现在有问题啊，我在哪个组件发请求。对吧。大家现在看啊，那我有几种选择啊，第一个想到的我是在这一个组件里面发请求，为什么呢。因为这里面有按钮。我们是点击按钮去发请求。对还是不对，对了吧，但是你要知道发请求的前后都要更新我的这一个立命的状态，对不对。不懂发请求，我准备发请求，我是要把它改为false，把它改为去啊，我发完请求得到数据以后，得到结果后，我是不是要去修改这个值或者它的值。

你说我要要更新这些状态，我最好在哪发请求比较合适？那不是，那肯定在这个组件嘛。在这个组件发请求，我直接操作它this.state不就好了？就最方便的位置，如果说我为了能够更方便的更新状态。啊，我在这个里面发请求是最好的。这个能不能理解，因为我发完请求马上就可以setl嘛，我操作这个更新状态很方便，如果假设我在APP里面发请求。那我是不是要通发一个通知告诉他我发请求了呀，你想想看，我的副组件要去更新直状态，是不是也调一些函数啊，挺麻烦的啊，不仅调函数啊，特别麻烦。所以呢，我们最好是在当前这个组件发请求，因为状态在这里啊，修改起来比较方便，更新状态特别方便，那关键是有一个问题啊。

我那个发请求是在did里面发吧。这不，有一个经常我们会说发请求异步代码不就在component。是吗？啊，大家想，如果在这里面只能发一次。对不对，而且是在初始化的时候发对吧。初始化的时候根本就不需要发请求。因为之前处理化的时候就是这个样子发请求，等我点击的时候是不是才发请求。能不能好？那也就是说有一个问题。我的这个组件其实发请求是不是还要接收这样一个输入框里面数据的一个条件了，那现在有个问题了。我们俩是兄弟组件，大家看着我啊，现在一个严重的问题，我这个兄弟组件如何将数据传给他呢？如何将数据传到兄弟组件呢？这个是很麻烦的。这张传。

Problem吗？不行，因为我们兄弟之间，我根本就没有，他里面根本没有我的标签。怎么办？对吧。这个时候最好的方式是什么呢？是你先告诉父亲。父亲传给我。能懂吗？啊，OK，说白了就是我要在父亲上面设置一个搜索关键字的状态。Search name。啊，你一点加牛，你不干别的，你就把这个输入化成值给他。对吧，而他这个圣任是作为属性传给了我的这个命子主业。一旦这个设计类变了，那我就知道。No，不，No。好，看他我来做一下写写，看看它能不能有感觉，首先我在这个APP里面去设计一个状态。

看看叫什么呢？叫search name就叫这个search name就不填完了吗？诶，但是要放在state里面是吧？所以state等于一个对象。开始是为什么？可以吧，好。而且这个值到时候是不是要设置新的值，那也就是说它应该有一个修改的方法吧，那我就取名叫search search类啊是个建函数，因为这样，因为我自定义的嘛。能看到吧，那你C你说传什么。唱什么？这难道不知道吗？呃，设内穿什么不知道啊。Set方法？什么get set方法？这不是写无数遍的东西吗？你设置社内的答案团社吗？

你都已经设置去了，你不传一个设计过来吗。OK，里面怎么写固定的。Set方法都是固定的一种写法。能看到吧，好，但这个方法我当前这个组件用吗。不用给谁用啊。是给设还是给main呢？Set set这个方法给谁用设用。能不能？啊，是给他用的，他来去掉啊，他什么时候掉啊。是不是点击这个八层的时候用啊。能看到我，那我怎么办呀？等于啊，这里面要指定一个方法对吧，我们就要设计吧。那我在这个里面应该搞一个什么设计啊，设计方法啊，等于啊箭头啊括号是吧。

好，那也就是说啊啊，还包括那个属性也要去搞一下啊，那个我们不要传属性嘛，Static啊prop等于一个它是吧。这该写的还得写啊，虽然说写下比较烦，叫proper from proper。是个什么？什么类型？Function is required。是吧，好大家看着啊，我现在是不是要调用这个方法。而且还要把谁传进去？把input里面内容传过去。对不对，那我们这个地方我们啊，为了简单的写法，我们写一个非受控组件嘛，因为受控组件写下太费劲了。

Ref等于啊，OK，看到啊，来一个input箭头，来一个this.input等于input，因为非数控主线，写起来舒服一点。好，那也就是说我是不是先得到输入的数据，得到输入的关键字。啊，关键字，哎，关键。我天呐，割弯关七键啊关键字好接着啊搜索是吧。好来怎么的啊，等于。this.input.value还来一下点确，其实最好能够剪裁，在搜索之前，你想看，如果他没有输了是吧？只有他有值我才去搜索吧。

难找吧？搜索掉谁啊。这不叫它吗？this.props点它谁？S name。是吧？好，那也就是说我一旦点击搜索按钮，我就会去更新我当前AP里面的这个状态。对吧，呃，这个状态应该让谁知道啊。应该让man知道。那也就是说我应该什么。是不是传过去，是不是这意思，看到吧。传给他。对吧？啊，那他是不是可以拿着它去发请求。我们先不管发不发请求，我先做这样一件事情，我先让它显示出来看看啊，先让这个STEM显示出来看看，看看能不能显示，先我声明一下，我接受这样一个属性，先声明sta proper type等于一个对象。

什么意思是吧？叫。哎，他不帮我引路吗？点是这个吧，是这个点什么。点那个是一个，它这个是个什么类型，是is require没引。最好一写一提示他会引入，那那是最少的，可惜不会吧。啊，你不用想。能看到吧，好，来，我先把它显示出来，看能不能在我搜索的时候它会变化啊，我怎么验证它有没有变呢？很简单，来看到我。

我在这个里面呢，去取一下吧。怎么认识？来，我就在这。来看一下。可以吧？好，来看一看。开始应该是没有。对不对？好，接着我从AA走里。啊，没东西是吧，来看一下。呃，我在这里呢，来一个。打印输出。看一下它里面有没有。看到了，好，我们来看一下啊。首先一上来应该是一个空串，所以看不出来什么对不对，好接着呢，我点击它走，你没反应，这个时候啊，调试机会来了怎么办，你说我该怎么办。

有没有报错啊，这种我告诉你啊，出现一些bug，这就叫bug了。Bug分为两类，一类是报错的bug，一类是不报错的bug。对吧，报错的bug一般来说应该是好解决的。能懂吧。而最怕的是什么这种。啊，现在我们该怎么办？关键是肯定是要找怎么入手。对吧，怎么走。啊，OK。因为大家要知道啊，界面的变化是根据数据来变化的。我首先要看一下，我点搜索以后数据变没变。这个时候要用到工具啊，我就告诉他，你赶紧打开工具。你得看工具的那个状态变化懂不懂，你看我点一下这一个就是我APP的状态看到了吧，啊接着呢，我点它，大家看它动也没动，这怎么行呢。

这个应该变了，也就是说这个A应该传到这个里面来，那才行，不然的话肯定是有问题的。能不懂数据没变化啊，OK，好，那数据没变化，首先啊，我们一会看啊。这是因为我们没有更新状态。对吗？我们就这么写来行了。我们是要更新状态去的。能懂吧？穿什么？因为刚好名字一样看到吗。

好，再来。看你这个啊。接着点。是不是有了来再改一个。有了没有，有了我的这个命组件能不能到。来关键是什么，这个微组件不是为了显示这个BB。对吧，他是人，他是要根据这个病例去发请求。关键现在出现一个矛盾啊，我咋知道他变了呢？对吧。他现在是确实变了，这个这个里面因为显示的数据变了嘛。但它自动变的，这我不知道啊。对吧，我要想办法能够知道我接收的这一个属性是否发生了变化。是吧，好，这个时候就要回到我们的那个生命周期。啊，组建生命周期有一个流程图。

大家看啊这个。啊，这个里面有一个方法。前面我跟大家说过，我们后面要讲。叫component will receive pros，什么意思？翻译一下这个单词啊，叫组件将要接收到新的pros，诶，这个地方它其实要写完整一点，应该写个new pro。啊，有人说老师这已经很长了，不能再写了，再写都受不了了是吧，所以估计他就省了。他就跟你心里一样，这已经很长了。OK。来我们来去，而且我们来看一下那个文档里面有没有这方面的说明呢。来文档。啊，今天下午的网速有点太慢啊。来，我给大家去找一下那个生命周期里面的一些啊，一些方法啊。

这个参考里面是组建的生命周期的相关方法是吧，打开它好，这里面呢，一。组件生命周期什么讲这个hello word还嗯，还没过来半天了。好来看一下，它里面呢，有些方法我们来看的是这个。对吧，来打开它。这个里面它的函数声明应该是这么写。他有个行差叫什么like pro，哎，这个名字取的不太好，应该叫new pro会比较好一点。六什么意思，新的？来，我们来用一下它啊。其实他这个会有，这说明大家我就不大家一个一个看了，我来直接说啊看这里。

这个不行是吧，有一个这个方法啊，我改给它改一个名字叫六啊新的pro，那也就是说那个新的属性是不在这个里面。能懂吗？啊，这一个方法什么时候调，非常简单，当组件接收到新的啊，属性值啊，调用。啊，毁掉都是自动毁掉的。那你说我干嘛去啊？首先我可以在这里面取出设计类。这怎么选？New直接写个大括号得了。写那么复杂干嘛，不然的话你还点。有没有看到？以这个方法一调，说明我是不是指定了新的搜索关键字。那说明我要干嘛去了。他指定了新的搜索关系，我应该干嘛去啊？收到再发请求。

对吗？啊，OK，就指定了啊。指定了新的类，那说明我要干嘛？啊，此时需要什么，需要发请求了。需要请求。嗯，好，那请求下面是不是发请求的代码要写了。那就谁来帮我发请求了？对，有工有有插件，有工具有模块啊。谁对吧，但我现在有吗？没有没有怎么办下载。对吧，来下载呗，NPM因斯动杠杠C，因为我是运行时需要对吧，那写什么那看。

好，等到下啊，各位观察。来，我们下面干嘛去？是不是准备发请求，在准备发请求之前先要更新状态。你想啊，更新状态，更新为什么状态，现在开始我的状态相当于初始化页面。根据在什么状态请求中。对不对？所以我要this set state。指定的值为什么对false呀，指定它的值为什么处别的也指定不了了，因为我也没数据对吧。下面干嘛去，真的要什么？是不是发请求了，发请求，发什么请求，加请求是吧，来用谁吧XX点。

Get啊，是不是需要有一个什么ul，好，这里面说一下那个ul啊，是一个什么样的ul啊。哎。嗯，我不知道那个我的工具，哎，刚那页面页面已经不在，诶还在啊，现在呢，我们看到的啊，我们看到的是它的那个，诶看呢别过去了。我们看到是搜索用户的，看到了吧，能看到我们搜用户的，搜索用户，它有一个特别的一个地址。嗯，后面的不用管它了。啊，大家看一下。这不代表搜索吗？搜索什么用户？Carry是什么意思？查询的关键字，你觉得我要写什么？行。

这不给你收吗？能看到不啊下面。下面干嘛？点刃的写法，固定棒箭头来它是吧？好把它看写写上啊。体啊，把它错误来写上啊，这是error箭头，那也就是说啊，现在这个地方是不是代表是成功的返回了呀，成功的返回最终我是不是要得到数据以后更新状态得到响应数据啊，下一步更新什么状态，更新为什么状态是不是成功。啊，OK，下面这一个说明什么？失败了，是不是更新为失败的状态？听懂不好，来吧。得到数据啊，得数据我首先啊，要知道它里面数据放哪里呢？还记得不，Data，这就是我们所需要的是不是result，但是什么结构我也不知道怎么办。

先什么是不是打印输出看一下呀。能不懂，好吧，那来呗。那这个我们已经不用了，给它关了啊下面。来搜索一下啊。A。看着这个输出啊。走，你。是不是请求中啊？嗯，东西赶紧来呀，就是网速现在快的够可爱的。行不行呢？好，休息一下。

不是呀，就剩一点点了，他要出来了，就就赶紧，这东西真是。你要死就找死啊，看看这里面，看这个吧，看它了是吧，这部相当文档已经告诉我了。这就是返回的整个数据。对吧，那我要取它的什么it。能不懂不啊it好了，It是每个对象是不是这样的结构，我要取对象的哪些数据看一下啊。再一个是什么？Login不就是那个那个登录名吗，是不是用户名吗。还有什么这个头像的地址吗？是吧，呃，这个。是不是其实他的这个用户的一个地址。我们是不是就需要这三个？那你说这个文档里面这个就是接口文档，它是不是告诉我了结果啊，我都不用等它了，来怎么做。

来看着啊，我们现在要去取出它里面的数据啊，取出它里面数据，我这个数据关键是点对。是吧，啊对头已经点了，点过了，应该点it是吧，对不？哎，多了一个点，好，那关键现在它就是我们的user是吧，但是这个user是吧，有点小问题，什么小问题，就是这个user里面的信息太多了，我就想要三个，你给我这么多。每一个优者是不是都多了一些信息？这个怎么办啊？我要把这些信息去掉，把那不用的信息都去掉，只想留下我想要的信息。怎么办？啊，OK，这个时候这一个数组啊，有问题是吧。个数没问题，能不懂吗？个数一点问题都没有，主要是每个对象跟我的要求不相符。是不是，而且关键是还有一个问题，我这一个这一个main里面取数据的时候，可不是用的那些属性。

这个是最最关键的，我没有用那些名字。咋办呢？应该要用数组的什么方法来做呢？哎，这个地方要用到map方法。估计大家能想得出来卖的方法是干嘛的。根据一个数组生成一个新的数组，新数组和原来数组有什么区别？长度一样吗？一样但是对象一样吗？不一样，但对象是不是对应关系？是对应第一个对象对应第一个，第二个对象对应第二个能懂不？嗯，来看它怎么写啊，看它。看到吧，也就是说现在我要得到一个东西叫user，对吗？是不是，但是这个item死了不行，我要调用map看着啊，我写一下大家也懂这东西。

箭头。线头，我最终是不是要返回一个对象。我能不能这么写去里面去写对象呢？啊，比如说有我就说我需要有一个name嘛，是吧，其实这个name呢，是item的什么呢？它有一个login。这是返回一个对象吗？是还是不是不是。为什么？因为现在是一个大括号，是一个函数体。对不对，但我希望他能理解成对象，对加个什么，对加个小括号。能看到吧，这样他就不会理解错误了，因为我因为这这这个这个大块不可能看成是呃，一个函数体的标识了。能看到吧。嗯，这个比较奇特啊，后面我们这种语法会反复用到啊，就是在一个大号的外面加个小括号。

啊，当然你也可以这么写，这么写啊，OK，就这么写，先写个大框，接着写，接着写它。你说老师我看这个看着还舒服一点，那行，那咱就这么写都没关系。啊，所以你要懂这个，我相信大家都能懂，但刚才那个可能有的人不太懂啊。还有什么？还有我这里面是不是需要一个需要一个ul，但是那个那个ul啊，它其实是什么，是it的点什么HTML_ul我还一个头像啊，叫阿凡达U，它那个不是这么写的，它那个是埃塔点阿尔法也叫这个名字，但是它是下划线。能看到吧，啊，这个地方大家看一下不叫阿凡达ul吗。

一共三个属性，看到吧，这样的话我的user是不满足我要求的。No one。好，那最后更新状态，这咋更新呢？This set state括号，大括号。跟谁说先来一个loading，为什么？还没出first，接着来个user。因为刚好是这个名字嘛。能不能看到。能理解吧，好，这一个就比较简单了。这个不更新状态去吗？更新为的状态，这个楼底也为破，但是我这里面要指定什么error message为一个什么值，对不对。能看到吧，好，I的值呢，你可以从这个L里面取。

当然你也可以自己指定，随便指定的说请求失败了对吧，这要求的话就写什么。看着吧。嗯。这样我们就做好了，那也就是说现在应该要有一个比较好的效果了。看一下。这个不是我们的吧，这个才是我们的，那是个静态的。哎，好了吧，好来吧。输入UA。搜索。哎。这个出出来了，但是有点什么哦，有要需要一个唯一的K这个地方我们没有注意，刚才我们在那个map的这个里面，每一个div都需要有一个什么。K等于什么？这是，这是个警告啊。

SS走你。是不是可以啊？是不是出来了吗？啊，OK，这个图片慢是因为网速太慢了，好，我再输入一个DD。走，你。可不可以啊，当然我，如果我不输，你觉得我能输吗？不能，为什么，因为我有限制啊，还记得吧，刚才我是不是判断了一下，如果有值我才收吗？对不对啊，So easy。好，那这里面啊，就用了一个非常重要的生命周期的一个函数叫component will receive pro。行，那整个这个我们就讲完了。啊，大晚上的时间就是需要去把这两个练习啊做出来，做出来你就可以睡觉了啊。