用户个人资料未显示在 github 搜索中

如何解决用户个人资料未显示在 github 搜索中

我是新手，并按照教程进行操作，其中讲师连接到 github api，以便根据您的搜索使用用户配置文件填充页面。但是我不能做同样的事情。

我们需要连接github api，在axios的帮助下使用search/users查询来获取用户。

这是我在 app.js 中的代码：

const github = axios.create({
  baseURL: "https://api.github.com",timeout: 1000,headers: { Authorization: process.env.REACT_APP_GITHUB_TOKEN },});

class App extends Component {
  state = {
    users: [],loading: false,};

  static propTypes = {
    searchUsers: PropTypes.func.isrequired,};
          
  searchUsers = async (text) => {
    this.setState({ loading: true });

    const res = await axios.get(
      `https://api.github.com/search/users?q=${text}`,{
        headers: {
          Authorization: `${process.env.REACT_APP_GITHUB_TOKEN}`,},}
    );

    this.setState({ users: res.data.items,loading: false });
  };

  render() {
    return (
      <div className="App">
        <Navbar />

        <div className="conatiner">
          <Search searchUsers={this.searchUsers} />
          <Users loading={this.state.loading} users={this.state.users} />
        </div>
      </div>
    );
  }
}
export default App;

您需要使用 github 创建个人令牌才能使用 github api。

这是我在搜索组件中的代码：

export class Search extends Component {
  state = {
    text: "",};

  onSubmit = (e) => {
    e.preventDefault();
    this.props.searchUsers(this.state.text);
    this.setState({text:""});
  };

  onChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };

  render() {
    return (
      <div>
        <form onSubmit={this.onSubmit} className="form">
          <input
            type="text"
            name="text"
            placeholder="Search Users...."
            value={this.state.text}
            onChange={this.onChange}
          />
          <input
            type="submit"
            value="Search"
            className="btn btn-dark btn-block"
          />
        </form>
      </div>
    );
  }
}

export default Search;

 

但是我无法在页面中搜索个人资料。谁能帮帮我。

这是我在应用根文件中的 .env.local 中添加的内容

REACT_APP_GITHUB_TOKEN='token <...>'

这是 Users.js：

在这里，我将添加用户样式并将用户传递给我稍后将通过 app.js 访问的组件。我还添加了一个微调器，它会一直旋转直到用户加载完毕

const Users = ({ users,loading }) => {
  if (loading) {
    return <Spinner />;
  } else {
    return (
      <div style={userStyle}>
        {users.map((user) => (
          <UserItem key={user.id} user={user} />
        ))}
      </div>
    );
  }
};

Users.propTypes = {
  users: PropTypes.array.isrequired,loading: PropTypes.bool.isrequired,};

const userStyle = {
  display: "grid",gridTemplateColumns: "repeat(3,1fr)",gridGap: "1rem",};

export default Users;

这是 UserItem.js：

这里我将用户类型格式化为卡片部分。我在此组件中以带有圆形图像的卡片格式获取所有内容

 const UserItem = ({ user: { login,avatar_url,html_url } }) => {
  return (
    <div className="card text-center">
      <img
        src={avatar_url}
        alt=""
        className="round-img"
        style={{ width: "60px" }}
      />
      <h3>{login}</h3>

      <div>
        <a href={html_url} className="btn btn-dark btn-sm my-1">
          More
        </a>
      </div>
    </div>
  );
};
UserItem.propTypes = {
  user: PropTypes.object.isrequired,};

export default UserItem;