Reactjs github搜索中未显示用户配置文件

我是一个新手，在教程中，讲师连接到github api，以便根据您的搜索使用用户配置文件填充页面。然而，我不能做同样的事情

我们需要连接到GithubAPI，并使用搜索/用户查询在axios的帮助下获取用户

这是我在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;

const github=axios.create({
基本URL:“https://api.github.com",
超时：1000，
标题：{授权：process.env.REACT_APP_GITHUB_TOKEN}，
});
类应用程序扩展组件{
状态={
用户：[]，
加载：false，
};
静态类型={
searchUsers:PropTypes.func.isRequired，
};
searchUsers=async（文本）=>{
this.setState（{loading:true}）；
const res=等待axios.get(
`https://api.github.com/search/users?q=${text}`，
{
标题：{
授权：“${process.env.REACT\u APP\u GITHUB\u TOKEN}”，
},
}
);
this.setState（{users:res.data.items，loading:false}）；
};
render（）{
返回(
);
}
}
导出默认应用程序；

为了使用github api，您需要使用github创建个人令牌

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

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;

 

导出类搜索扩展组件{
状态={
正文：“，
};
onSubmit=（e）=>{
e、 预防默认值（）；
this.props.searchUsers（this.state.text）；
this.setState（{text:}）；
};
onChange=（e）=>{
this.setState（{[e.target.name]：e.target.value}）；
};
render（）{
返回(
);
}
}
导出默认搜索；

但是，我无法在页面中搜索配置文件。谁能帮帮我吗

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

REACT_APP_GITHUB_TOKEN='token <...>'

REACT\u APP\u GITHUB\u 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;

constusers=（{Users，loading}）=>{
如果（装载）{
返回；
}否则{
返回(
{users.map（（用户）=>(
))}
);
}
};
Users.propTypes={
用户：PropTypes.array.isRequired，
加载：需要PropTypes.bool.isRequired，
};
常量用户样式={
显示：“网格”，
gridTemplateColumns：“重复（3,1fr）”，
gridGap：“1rem”，
};
导出默认用户；

下面是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;

constuseritem=（{user:{login，avatar\u url，html\u url}}）=>{
返回(
{login}
);
};
UserItem.propTypes={
用户：PropTypes.object.isRequired，
};
导出默认用户项；

您好，它起作用了，我没有对代码做任何更改。我不知道为什么它以前不起作用。如果有人有一些看法，请回答