15 react ajax 请求 github 用户信息

需求：搜索框输入要搜索的用户名，列表中展示相关的用户的头像和昵称。

第一步：拆分组件

共拆分为4个组件，APP，Search，List，Item

第二步，定义组件并初始化显示静态组件

第三步：初始化显示数据

这里需要考虑

① List 组件显示数据

②但是 List 组件要求页面一加载先提示一句 “请输入关键字进行搜索”

③List 组件获取到用户搜索的关键字之后，在渲染数据之前，List 组件要显示 “Loading........”，

④请求到数据之后，List 组件才开始显示数据

⑤如果请求出错，还需要显示出错信息

综上，LIst 组件需要有4个状态，即：initMsg（初始时显示的提示信息），loadMsg（显示‘Loading’），usersinfo（用户信息），errMsg（请求失败是的提示信息）

List 组件的状态需要不断更新，因此我们选择在List 组件中发起请求，而不是点击按钮发起请求

先定义List 组件的状态，并初始化显示

List.jsx

 1 import React, { Component } from 'react'
 2 
 3 import Item from '../component_item/component_item'
 4 
 5 export default class List extends Component {
 6     state ={
 7         initMsg:true,
 8         loadMsg:false,
 9         usersinfos:null,
10         errMsg:null
11     }
12 
13     render() {
14         const {initMsg,loadMsg,userinfos,errMsg}=this.state;
15         if (initMsg) {
16             return <h2>请输入关键字进行搜索：</h2>
17         }
18         else if(loadMsg){
19             return <h2>Loading...</h2>
20         }
21         else if(errMsg){
22             return <h2>{errMsg}</h2>
23         }
24         else{
25             return (
26                 <div>
27                     <div className="row">
28                         {
29                             userinfos.map((userinfo, index) => <Item userinfo={userinfo} key={index} />)
30                         }
31                     </div>
32                 </div>
33             )
34         }
35        
36       
37     }
38 }

下面，List组件需要获取用户的关键字，

但是，List 和 Search 在位置上是兄弟组件，组件标签互不包含，无法通过 props 传递数据，

因此，我们点击按钮之后，需要让 Search 组件获取到用户的输入之后传给父组件 APP，父组件再通过 props 传给 List

先在父组件中定义一个状态 search_value 为空，并且定义一个 setSearchValue 方法，改变父组件中 search_value 这个状态值，改变后的值就是用户输入的值（通过传参），而用户输入的值是在 Search 组件中获取的，因此把这个 set方法传递给 Search组件即可，Search 组件点击按钮后获取到用户的输入再使用这个方法改变这个父组件中这个状态值

父组件中：