如何在 React 中使用 github api 来显示 github 用户信息？

Question

我开始制作一个 React 应用程序，它可以通过用户名搜索 github 用户，其中包含一个显示用户名、个人资料头像、关注者数量、用户正在关注的组件，以及一个显示用户存储库的组件。到目前为止我有以下代码：

     class GitHubSearch extends React.Component {

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

getUser(username) {
    return fetch('https://api.github.com/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'));

这是 html:

        <div id="container">

        </div>

到目前为止，搜索组件已呈现，但当我输入用户名时，我在控制台中收到此错误：

GET https://api.github.com/users/$%7Blogin%7D 404 (Not Found)

我错过了什么？

Answer 1

您应该用反引号替换

fetch

函数中的引号，因为它们允许内联变量。正常的引号不会。

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

Answer 2

您需要使用反引号来包装您的网址（模板文字）：

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

另一件事，您正在使用

login

但它没有在任何地方定义。您想使用

username

吗？

Answer 3

这是 REACTJS 的代码

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

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

  useEffect(() => {
    fetch("https://api.github.com/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;