Search GitHub

Axios

by Allie Yu

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js"></script>
<div id="root"></div>

Babel + JSX

//Sibling pass state
class Item extends React.Component {
    render() {
        let {user} = this.props;
        return (
            <React.Fragment>
                <a href={user.userRepoUrl}>
                  <img src={user.userAvatarUrl} alt={user.userName} />
                </a>
                <p>{user.userName}</p>
            </React.Fragment>
        )
    }
}

class List extends React.Component {
	state = {
  	isFirst: true,
    isLoading: false,
    users: [],
    errMsg: ''
  }
  
  //keyword 变几次就触发几次
  async componentWillReceiveProps({keyWord}){
    this.setState({
      isFirst: false,
      isLoading: true,
      users: [],
      errMsg: ''
    })
  	//distruct {keyWord} from (newProps) : console.log(newProps);
    const url = `https://api.github.com/search/users?q=${keyWord}`
		try {
			let response = await axios.get(url);
      let users = response.data.items.map(item => {
      	return {
        	userAvatarUrl: item.avatar_url,
          userRepoUrl: item.html_url,
          userName: item.login
        }
      })
      this.setState({
        isFirst: false,
        isLoading: false,
        users,
        errMsg: ''
      })
    }
    catch(err) {
			this.setState({
        isFirst: false,
        isLoading: false,
        users: [],
        errMsg: err.message
      })
    }
  }
  
  render() {
    let {isFirst, isLoading, users, errMsg} = this.state
    if (isFirst) {
      return <h2>Input keyword, click button</h2>
    } else if (isLoading) {
      return <h2>Loading...</h2>
    } else if (errMsg) {
      return <h2>{errMsg}</h2>
    } else {
      return (
        <div>
          {
            users.map(user => {
              return <Item key={user.userName} user={user} />
            })
          }
        </div>
      )
    }
  }
}

class Search extends React.Component {

  search = () => {
    let {setKeyword} = this.props;
    //1.get input
    let content = this.refs.keyWord.value.trim();
    //2.Send keyword content to List
   ...