00:00
在获取到电影数据之后,接下来我们要把获取到这个数据展示到下面的这个列表组件中,哎,首先我们来看一下这个结构啊。我们是在这个啊,Search这个组件里面去获取的这个数据,对不对,但是要把数据展示到哪里呢?展示到这个list啊这个组件里面对吧?啊,那以我们现在所掌握的这个技术,兄弟之间你去进行这个啊数据的一个传递是不是暂时做不到,那怎么办?是不是可以借助他与他们共同的这个父亲这个爱护,这个租金啊。对不对,那我这里获取了这个数据之后啊,我给到这个APP组件,然后。APP组件呢,再想办法啊,给到这个它的这个子组件,历史组件是不是就可以了,哎。注意这点啊。那接下来我们就开始去写一下啊,首先。既然要在这个APP组件里面去维护这个数据,是不是。Search组件搜索到这个数据之后,要把这个数据啊给到这个副组件APP,那怎么给呢?那是不是副组件提供一个方法就可以了,也就是当你诶搜索到这个数据之后,你执行副组件的一个方法,那把数据给传回去就可以了,对不对?那这个APP这个副组件如果想向list的传递这个数据,这个就比较简单了,直接使用purpose就可以,好,接下来我们来写一下代码。
01:21
来,开始写代码。找到哎,它们的共同的父组件f.GS在这里,我来初始化状态。Voice啊,等于一个空数组,一开始是没有电影的对吧?啊,初始化状态,把初始给写到上面啊。再来写一个啊,更新状态。哎,这里我们要写一个去啊,更新这个状态的一个方法啊,之前我们说过啊,你的状态在哪,那你操作这个状态的这个方法就在哪,对吧。Save。
02:07
This site。State,哎,那这里呢,我要接收一个Mo的一个参数啊。直接给到他。因为我要去更新这个状态,这个名字刚好和这个名字是一样的啊,所以我可以直接啊省略那个K啊啊就是说直接这么写就可以。接下来我要把这个方法啊,这里写错了,多了一个字母啊,我要把这个方法给谁呢?给到这个色系,哎,那我传给这个色系之后呢,色计它在搜索到数据之后,就可以执行这个方法,从而去更新,哎,这个里面的这个状态对不对?好。来把这个方法。啊,给到such。在设计方法里面啊。这里我如果请求到数据成功之后,那我就嗯不去这个cons这些数据了,而是干什么直接啊this这样。
03:07
Purpose啊调用就是说负极给我传过来的啊,这个save Mo这个方法,那这个方法呢,它要接收一个参数,看一下接收一个啊Mo的这么一个参数,那我把这个Mo啊数据给传给副组件。电影的数据在哪,是不是在这个response.data这个里面,对不对,好这个输出我就不要了。可以吧,好,那接下来我们来保存啊,保存之后我们来看一看,当我们进行搜索到数据之后,哎,副组件的这个状态有没有更新。在这里啊,还记得怎么看这个组件吗?啊,我因为我们装了这个react的这个啊调试的工具,所以啊,我们在这里找到啊,这个这个组件这一块,然后找到这个色系。哎,找到这个APPAPP里面它是不是有一个这个么?意思是空的对吧,我们一开始初始化是空的,那接下来我来搜索这个数据啊,搜the。
04:00
点搜索你看是不是就填窗了啊,但这个里面啊,因为我没有做输出,所以没有啊来看这个组件是不是模里面就有了,这个状态是不是就就有了是不是好。接下来啊。数据已经有了,也就是说现在在这个副组这已经啊,拿到了这个电影的这个数据,我是不是可以把这个数据啊,直接传给这个list list里面去,呃,使用这个数据就可以了啊来。类似点state点。啊,历史的组件接收到,哎,副组件传递过来的这个数据之后。下。List组件index。找到这个组件之后,嗯,是不是我就可以去在这里面去啊,遍历这个数据就可以了。来,接下来我在这里面,我先获取一下这个电影数据啊。
05:01
么意思?等于谁?This加purpose?传过了这个movie啊,直接结构。那先输出一下啊,看能不能拿到这个数据啊。刷新完了是吧?啊,注意这个conslo啊,现在是空,因为一开始哎,我们的这个电影数据是空,那我接着搜索一个在。哎,是不是有数据了啊,这个cons是我们在这个list组件的啊,去输出这个数据来说明啊,我通过这个。啊,色体这个组件搜索到数据之后,哎,我执行副组件那个方法,把数据传给父组件,那副组件呢,再通过这个purpose传给这个历史这个子组件,然后在这个历史子组件里面是可以拿到这个数据的,对不对,那接下来就开始去啊,去遍历这个数据就可以了,那在遍历数据之前,我们先把这些字段搞清楚,看一下我们需要哪些字段,我们需要图片对不对,然后需要这个名字,然后还需要就说哎这个链接,你说我们点这个图片,它能到这个电影的这个这个这个详情这个链接对不对?好,那先反回啊。
06:07
接下来看一看啊。我还要再搜索一下才行啊。刷新,再重新搜索。接下来看一看,哎,这几个字段哪些是我们用得到的啊,首先啊,这个image就是它这个图片,是不是还有它的title,就是我们这个标题,还有它URL,就是电影的这个地址啊,我们要这几个啊字段,然后写下来。哎,这里看是这两个啊,你看这两个输出的这个电影,那我们其实实际上只要要一个就可以了,对吧。来,我们只留一个。留一个怎么办?是不是开始去迭代这个数组?那在这里啊。迭代这个数组,哎。点map。里面是一个回调函数啊,那它有一个参数,这个参数就是它去便利的,呃,一个一个的这个电影里面的一条一条的数据啊,它是一个对象,把它给这样去写上啊啊最后啊要的这个内容,哎,就是最终它返回的一个啊内容啊,那return谁呢?我们加个括号啊,其实return的是我们这一段内容对不对。
07:26
接下来开始把这些啊,像标题呀,像图片呀,这些我们都给替换掉就可以了,是吧?来我们先替换一个标题啊,标题使用的是谁。木ABC点抬头,诶是这个字是吧。TITLE。哎,接着看一看啊,其他的一个地方啊。图片的地址啊,也换成啊,每一条数据的它的这个地址的。这个删掉啊。
08:00
点image。然后是呃,我们的这个alt,它是使用title吧,好,还有就是A标签的这个链接。链接诶,我看一下是什么啊,有点。忘了。是这个URL啊,直接就是URL。点URL保存。好,现在因为没有数据,所以它没有显示来,我搜索一个在。诶,是不是数据都显示了,你看到了吧?啊,当然他这有一个报错啊,他说这个。啊,你没有这个唯一的一个K对不对,我们把这个加上图片的问题,等会再给大家说。也就是我们在最外层的迭代的这个元素要加上一个唯一的一个啊,KK的话呢,呃,我们就不使用这个索引了啊,因为。
09:00
这个数据里面它是不是有一个ID,哎,我们使用每一个电影的这个DD嘛,它肯定是唯一的啊,这时候保存再来看一下啊。是不是哎,名字都显示了啊,然后再给大家说一下这个图片为什么没有显示啊。有这么几个可能啊,一个是啊,就是这个图片呢,豆瓣这边它做了一些限制,不让你啊其他的这个域名进行呃,直接去呃访问和显示啊,当然在浏览器中是可以的,然后有的呢,就是说你在浏览器中也不可以,只有豆瓣的这个域名能访问。啊,这时候啊,就说你即使是在浏览器中你也打不开啊,这是一个原因,再一个原因就可能是他这个做的这个全国的这种CDN加速,然后存在一些问题啊,但有时候呢,你图片可能你暂时刷新它就好使了,我们再试一下看一下啊。刷新再试一下啊。啊是吧,有的时候你再刷新再重新试一下就好使了,但是啊,即使是这样,还有一些图片是打不开的,那这些图片打不开的就是可能他做了一些啊,比如说呃,域名的一些限制啊,只有我豆瓣的域名能访问怎么怎么样的,或者说啊,做了这个请求头的一些限制,那这种图片怎么办呢?也有办法啊。
10:16
呃,有有这样一个网站。啊,就是这个网站它呢,就是可以就是帮你去打开这个图片,再给你进行一个显示,甚至进行啊图片的这个大小的一些诶转换都是可以的啊,然后这里有详细的一个文档,当然我们不需要用那么多,我们只要呃让他能帮我们去打开这些图片就可以了啊,它使用的方式比较简单,就是说你在他这个地址后面加上一个问号URLURL就是你要打开的图片的地址啊。好,我们来返回,也就是说是他这个地址,你在后面去加上这个问号啊,URL等于UR,后面呢,显示你要打开的图片的地址就可以了,那比如这个图片是不是打不开,我们来检查元素,拿一下这个图片的地址看一下啊。就这个地址是不是好,然后我们放到这个URL这个参数后面,这时候我们来回车看他能不能帮打开是不是可以的,哎,那这个时候。
11:06
呃,我们为了保证这个每个图片都能显示,所以去改一下我们的代码,那怎么改呢?就是在这个。乙卖进啊,这个src这里啊。来。加我们进行一个连接啊。这个是我复制的啊,这个地址,然后是问号UR等于吗?然后然后是连上,连上这个图片的这个地址是不是可以了,也就相当于是什么,相当于我在每个的图片的这个地址的前面,你看去连上了这么一个字符串,是不是就可以打开了,哎,这时候我们来你看已经可以了啊。对吧,刷新一下啊。来搜索一个,还是搜索这个吧。输入图片已经有了啊,当然这个即使是这种情况下,它有的这个还是无法访问。我们来复制一下这个地址啊,看看什么问题啊,这个就关掉,重新开一个。粘贴。
12:00
看到确实无法访问啊,那这种情况有可能是这个这个协议啊造成的啊。所以我们把这个URL后面,也就是图片的这个协议给去掉。直接这么去访问,哎,这时候是可以访问的,也就是说哎,我们要把这个API返回到这个数据中,它这个APS还要给去掉。才可以。来,我们来去一下啊。那怎么去掉它的这个APS呢?哎,直接点re。Place啊,替换。替换谁比起GDPS冒号斜跟前杠,把它替换成什么呢?替换成空格,哎,这样就相当于把它给移除掉了,是不是?啊,这时候来。运行一下看一下啊。这边啊,是不是都有了啊,你看这些图片都有了,对不对。关于这个图片的问题啊,确实是因为豆瓣他们这个API做的很多的一个限制啊,导致我们无法访问,然后我们就借助了这个。
13:00
啊,这个image啊,这个地址这个工具啊,他去帮我们来访问。访问好之后呢,我们再呃,就是显示这个图片啊,这时候可以解决它的这个呃,域名的一些限制啊,包括它这个DNS啊,啊缓存的一些限制啊,但是还有些图片是无法访问,就可是它的这个协议可能就有问题,那么把它这个协议也给去掉,哎,直接至urr后面跟上这个图片的这个地址啊,当然其实如果这个图片啊,这个是我们自己的服务器返回图片就不用这么麻烦,我们直接显示图片的地址就可以了啊,当然我们这个使用的这个别人的这个API没办法,那只能这么去处理一下啊,当然最终啊处理的结果还可以啊,我们再换一个其他的,比如说啊搜索这个。我们。哎,是不是我们相关的电影就有了,哎,那这节课我们就先写到这里,那下节课我们继续优化,优化什么呢?啊,比如当我们一开始刷新页面没有数据的时候,这里是不是要展示一个,哎,请输入关键字进行搜索,还有就是当我们点击搜索的时候,要有一个loading的状态,哎,那这个我们下节课再处理。
我来说两句