javascript - How do I get the github user info to show up using github api in react? - Stack Overflow

admin管理员组

文章数量:1302940

I started making a react app that can search for a github user by username with a ponent that displays the username, profile avatar, number of followers, who the user is following, as well as a ponent that displays the user repos. I have the following code so far:

     class GitHubSearch extends React.Component {

         constructor(props){ 
           super(props); 
            this.state = { 
            username: '' 
          };
        }

getUser(username) {
    return fetch('/${login}')
    .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>
        <p>{this.state.username} 
  <br/> 
    {this.state.id} 
  <br/> 
  </p>
        <img src={this.state.avatar_url}/>
    </div>
 }

return (
    <div className="GitHubSearch">
      <header className="Search-header">
        <h1>Github User Search </h1>
      </header>
    <form onSubmit={e => this.handleSubmit(e)}>
      <input ref='username' type='text' placeholder='username' />
    </form>
            <p className="Search-intro">
                {user}
            </p>
    </div>
    );
   }
 }

 ReactDOM.render(<GitHubSearch/>, document.getElementById('container'));

This is the html:

        <div id="container">

        </div>

So far the ponent for search renders but when I input the username, I get this error in the console: GET /$%7Blogin%7D 404 (Not Found)

What am I missing?

I started making a react app that can search for a github user by username with a ponent that displays the username, profile avatar, number of followers, who the user is following, as well as a ponent that displays the user repos. I have the following code so far:

     class GitHubSearch extends React.Component {

         constructor(props){ 
           super(props); 
            this.state = { 
            username: '' 
          };
        }

getUser(username) {
    return fetch('https://api.github./users/${login}')
    .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>
        <p>{this.state.username} 
  <br/> 
    {this.state.id} 
  <br/> 
  </p>
        <img src={this.state.avatar_url}/>
    </div>
 }

return (
    <div className="GitHubSearch">
      <header className="Search-header">
        <h1>Github User Search </h1>
      </header>
    <form onSubmit={e => this.handleSubmit(e)}>
      <input ref='username' type='text' placeholder='username' />
    </form>
            <p className="Search-intro">
                {user}
            </p>
    </div>
    );
   }
 }

 ReactDOM.render(<GitHubSearch/>, document.getElementById('container'));

This is the html:

        <div id="container">

        </div>

So far the ponent for search renders but when I input the username, I get this error in the console: GET https://api.github./users/$%7Blogin%7D 404 (Not Found)

What am I missing?

• javascript
• reactjs
• github-api

Share Follow asked Apr 20, 2018 at 15:10 MikeL5799MikeL5799 45511 gold badge1111 silver badges2929 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

You should replace the quotes in the fetch function with backticks, as they allow inline-variables. The normal quotes do not.

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

You need to use backticks to wrap your url (template literals):

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

Other thing, you are using login but it's not defined anywhere. Did you want to use username?

this is the code for REACTJS

import React, { useEffect, useState } from "react";

function GitHubUserData() {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://api.github./users/yourUserNameHere")
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        setData(data);
      });
  }, []);

  return (
    <>
      <div className=" px-10 py-20 bg-gray-600 text-white">
        <p className="py-2 text-3xl text-center font-medium ">
          Name : {data.name}
        </p>

        <p className="text-3xl font-medium text-center py-2">
          Github Followers : {data.followers}
        </p>
      </div>
    </>
  );
}

export default GitHubUserData;

本文标签： javascriptHow do I get the github user info to show up using github api in reactStack Overflow