[JavaScript知识库] 【React学习】github用户搜索案例，附触底刷新

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> 【React学习】github用户搜索案例，附触底刷新 -> 正文阅读

[JavaScript知识库]【React学习】github用户搜索案例，附触底刷新

话不多说直接上代码，困困=.=

app.jsx文件：

import axios from 'axios'
import React, { Component } from 'react'
// axios.defaults.baseURL = 'http://127.0.0.1:3000'
import './app.css'

export default class App extends Component {
  inputRef = React.createRef()
  botRef = React.createRef()
  state = {
    list: [],
    loading: false,
    page:1
  }
  componentDidMount() {
    window.onscroll = () => {
      if (this.botRef.current.offsetTop - window.pageYOffset < window.innerHeight + 100) {
        if(this.state.loading)return
        this.getUserInfo()
      }
    }
  }
  getUserInfo = () => {
    if (this.inputRef.current.value.trim() === '') return this.inputRef.current.value = ''
    this.setState({
      loading: true
    })
    axios.get('http://localhost:3000/api1/search/users', {
      params: {
        q: this.inputRef.current.value,
        page:this.state.page
      }
    }).then(res => {
      this.setState({
        list: this.state.list.concat(res.data.items)，
        loading: false，
        page:this.state.page + 1
      })
    }, err => {
      console.log(err)
      this.setState({
        loading: false
      })
    })
  }
  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} placeholder='请输入用户信息关键字' style={{ width: '50vw' }} />
        <button onClick={this.getUserInfo} style={{ backgroundColor: '#903', marginLeft: '20px', color: 'white' }}>搜索</button>
        <div className='out-box'>
          {
            this.state.list.map(i => (
              <div className='column-flex' key={i.id}>
                <a rel="noreferrer" href={i.html_url} target="_blank">
                  <img src={i.avatar_url} alt="head_img" style={{ width: '100px' }} />
                </a>
                <p>{i.login}</p>
              </div>
            ))
          }
        </div>
        <div style={{ marginTop: '20px', display: this.state.loading ? 'block' : 'none' }}>
          <h1>Loading...</h1>
        </div>
        <div ref={this.botRef}></div>
      </div>
    )
  }
}

app.css样式文件：

.out-box{
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3,1fr);
  grid-template-rows: minmax(100px,auto);
  row-gap: 10px;
  column-gap: 10px;
  padding: 10px;
  border: 2px solid #903;
}
.column-flex{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 2px solid orange;
}

setupProxy.js代理配置：

const {createProxyMiddleware} = require('http-proxy-middleware')

module.exports = function(app){
  app.use(
    createProxyMiddleware('/api1',{
      target:'https://api.github.com',
      changeOrigin:true,
      pathRewrite:{
        '^/api1':''
      }
    })
  )
}