如果输入的用户名不存在于github上，我会收到一条错误消息

Question

It's a react app and I am fetching the user data through github api. I want an error message if the entered username is not present on github. The rest of the search is working fine but I am unable to display the error. I have tried showing the error when the response status is 404 but it hasn't work. Could somebody please help me with this?

 import React, { Component } from 'react'; import './App.css'; // App component class App extends Component { constructor(){ super(); this.state = { username: '', id: '', url: '', avatar_url: '' } } getUser(username){ return fetch(`https://api.github.com/users/${username}`) .then(response => response.json()) .then(response => { return response; }) } async handleSubmit(e){ e.preventDefault(); let user = await this.getUser(this.refs.username.value); this.setState({ username: user.login, id: user.id, url: user.url, avatar_url: user.avatar_url }); } render() { let user; if(this.state.username){ user = <div> <img alt="user-dp" src={this.state.avatar_url} width={"220px"} /> <p><strong>Username: </strong>{this.state.username}</p> <p><strong>User id: </strong>{this.state.id}</p> <p><strong>Profile URL: </strong> <a href={"https://github.com/" + this.state.username}>{"https://github.com/" + this.state.username}</a> </p> </div> } return ( <div className="app"> <header className={"app-header"}> <h1>Github Finder</h1> </header> <form onSubmit={e => this.handleSubmit(e)}> <label className={"label-finder"}>Search github user: </label> <input className={"input-finder"} ref='username' type="text" placeholder='Enter Username' /> </form> <div className={"user-data"}> {user} </div> </div> ); } } export default App; 

Answer 1

Try this. I corrected your code. I have explained in code as comments for your understanding

PFB corrected code

import React, { Component } from 'react';
import './App.css';

// App component

class App extends Component {

  constructor(){
    super();
    this.state = {
      username: '',
      id: '',
      url: '',
      avatar_url: '',
      user: ''
    }
  }

  getUser(username){
    return fetch(`https://api.github.com/users/${username}`)
    .then(response => response.json())
    .then(response => {
      return response;
    })
  }

  async handleSubmit(e){
    e.preventDefault();
    const user = await this.getUser(this.refs.username.value);
    //You can use user.ok to check whether the response is ok if yes set the user details otherwise user is not found so set the values to default one
    // I have taken additional variable to show error message when user is not found. If user found I will set user to "" empty string other wise I am setting user not found value to user.
    if(user.ok){
      this.setState({
        username: user.login,
        id: user.id,
        url: user.url,
        avatar_url: user.avatar_url,
        user: ''
      });
    }else{
      this.setState({
        username: '',
        id: '',
        url: '',
        avatar_url: '',
        user: 'not found'
      });
    }

  }


  render() {
    const { user, username,avatar_url, id } = this.state;
    // The above line reduces repeating this.state.xxx in render method
    return (
      <div className="app">
        <header className="app-header">
          <h1>Github Finder</h1>
        </header>
        <form onSubmit={e => this.handleSubmit(e)}>
          <label className="label-finder">Search github user: </label>
          <input className="input-finder" ref='username' type="text" placeholder='Enter Username' />
        </form>
        <div className="user-data">
          {/* You can directly check if user == "not found" then show error message using && operator*/}
          {user == 'not found' && (
            <div>
              <img alt="user-dp" src={avatar_url} width=220 />
              <p><strong>Username: </strong>{username}</p>
              <p><strong>User id: </strong>{id}</p>
              <p><strong>Profile URL: </strong>
                <a href={"https://github.com/" + username}>{"https://github.com/" + username}</a>
              </p>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default App;