react axios github搜索
我要学web 人气:0加载
请求成功
请求失败
在文件路径点击cmd 回车
首先把服务器打开 npm start
app.js
import React, { Component } from 'react' import "./App.css" import Header from './conompents/Header' import List from './conompents/List' export default class App extends Component { // 初始化state state={ users:[], isloading:false, isfirst:true, err:'' } update=(updatemessage)=>{ this.setState( updatemessage ) } render() { return ( <div className="container"> <Header update={this.update} /> <List users={this.state}></List> </div> ) } }
Header.jsx
import React, { Component } from 'react' import axios from"axios" export default class Header extends Component { search=()=>{ console.log(this.searchbtn.value); this.props.update({isfirst:false, isloading:true}) axios.get(`http://localhost:3000/api1/search/users?q=${this.searchbtn.value}`).then( // 成功时回调 response=>{ console.log("发送请求成功",response.data.items); this.props.update({users: response.data.items,isloading:false}) }, // 失败时回调 error=>{ this.props.update({err:error.message,isloading:false}) console.log("失败了",error.message); } ) } render() { return ( <section className="jumbotron"> <h3 className="jumbotron-heading">Search Github Users</h3> <div> <input type="text" placeholder="enter the name you search" ref={c=>this.searchbtn=c} /> <button onClick={this.search}>Search</button> </div> </section> ) } }
List.jsx
import React, { Component } from 'react' import Listitem from './Listem' export default class List extends Component { render() { return ( <div className="row"> { this.props.users.isfirst ? <h2 style={{margin:"50px"}}>Welcome to use, please enter the keyword</h2> : this.props.users.isloading ? <h2 style={{margin:"50px"}}>Loading......</h2> : this.props.users.err ? <h2 style={{margin:"50px"}}>{this.props.users.err}</h2> : this.props.users.users.map((a) => { return ( <Listitem key={a.id} users={a} /> ) }) } </div> ) } }
Listitem
import React, { Component } from 'react' import "./index.css" export default class Listitem extends Component { render() { return ( <div className="card" > <a href={this.props.users.html_url} target="_blank" > <img src={this.props.users.avatar_url} style={{ width: '100px' }} /> </a> <p className="card-text">{this.props.users.login}</p> </div> ) } }
加载全部内容