react+axios實(shí)現(xiàn)github搜索用戶功能(示例代碼)

更新時(shí)間：2021年09月17日 14:16:47 作者：我要學(xué)web

這篇文章主要介紹了react+axios實(shí)現(xiàn)搜索github用戶功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

在這里插入圖片描述

加載

在這里插入圖片描述

請(qǐng)求成功

在這里插入圖片描述

請(qǐng)求失敗

在這里插入圖片描述

在文件路徑點(diǎn)擊cmd 回車(chē)

在這里插入圖片描述

首先把服務(wù)器打開(kāi) 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(
      //  成功時(shí)回調(diào)
       response=>{
        
         console.log("發(fā)送請(qǐng)求成功",response.data.items);
         this.props.update({users: response.data.items,isloading:false})
       },
      // 失敗時(shí)回調(diào)
      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}
              />
              &nbsp;
              <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>
        )
    }
}

到此這篇關(guān)于react+axios實(shí)現(xiàn)搜索github用戶功能的文章就介紹到這了,更多相關(guān)react axios github搜索內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: