react豆瓣API获取电影数据小demo

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 entd使用 使用entd的layout布局快速搭建页面 entd官网 页面刷新，路由不刷新，设置sider和路由同步，在componentWillMount还是componentDidMount都获取不到路由信息，但是能获取window.location， 利用window.location获取路由信息，同步sider选中框 请求豆瓣数据 API使用参考 https://blog.csdn.net/weixin_44506318/article/details/102886537 react可以用原生的fetch请求，如果跨域可以用fetch-jsonp获取所需数据

cnpm i fetch-jsonp -S

使用：

import fetchJSONP from 'fetch-jsonp'

let url = `https://douban.uieee.com/v2/movie/${this.state.type}?start=${(this.state.nowPage - 1) * this.state.pageSize}&count=${this.state.pageSize}`
    
fetchJSONP(url)
  .then((res) => res.json())
  .then((res) => {
        something...
  })
.catch((err) => console.log(err))

数据加载动画，使用antd的Spin

//按需引入
import { Spin, Pagination } from 'antd'
//使用
    <Spin
          style={{ display: 'block', margin: '0.6rem auto' }}
          size="large"
          tip="Loading..."
        ></Spin>

电影数据下面的分页使用antd的Pagination

同样使用方式 点击电影照片，跳转到对应详情组件，这里因为根据电影id获取数据的api不好用，获取数据方式变成了，在父组件定义一个方法和一个接收数据的变量，把这个方法传递到电影列表组件，点击一个电影卡片，就出发这个方法，这个方法把点击的电影的信息传给父组件上面接收信息的变量，然后把这个变量传递给电影详情组件，这样也可以实现，点击哪个电影，就获取哪个电影的信息，将这个信息传递给它的兄弟组件展示详情信息 组件传值 正常组件只需要在组件的标签上书写就可以实现

    <Movie name="name"></Movie>

使用路由展示的组件的上面这样写不生效，可以换一种写法

    <Route path="/movie/:type/:page" render={()=>(
            <MovieList getDetailed={this.getDetailed}></MovieList>
          )}></Route>

不过这样写有一个缺陷，就是在组件内部获取this.props时获取不到路由信息，路由的对应参数可以通过window.location.hash来获取 代码：GitHub下载