react+axios实现github搜索用户功能(示例代码)
【react+axios实现github搜索用户功能(示例代码)】
文章图片
加载
文章图片
请求成功
文章图片
请求失败
文章图片
在文件路径点击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 {// 初始化statestate={users:[],isloading:false,isfirst:true,err:''}update=(updatemessage)=>{this.setState(updatemessage)}render() {return ()}}
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 (Search Github Users
this.searchbtn=c}/> )}}
List.jsx
import React, { Component } from 'react'import Listitem from './Listem'export default class List extends Component {render() {return ({this.props.users.isfirst ? Welcome to use, please enter the keyword :this.props.users.isloading ? Loading...... :this.props.users.err ? {this.props.users.err} :this.props.users.users.map((a) => {return ()})})}}
Listitem
import React, { Component } from 'react'import "./index.css"export default class Listitem extends Component { render() {return ({this.props.users.login}
)}}
到此这篇关于react+axios实现搜索github用户功能的文章就介绍到这了,更多相关react axios github搜索内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- MybatisPlus使用queryWrapper如何实现复杂查询
- python学习之|python学习之 实现QQ自动发送消息
- 孩子不是实现父母欲望的工具——林哈夫
- opencv|opencv C++模板匹配的简单实现
- Node.js中readline模块实现终端输入
- java中如何实现重建二叉树
- 人脸识别|【人脸识别系列】| 实现自动化妆
- paddle|动手从头实现LSTM
- pytorch|使用pytorch从头实现多层LSTM