Question

我知道我的代码中有错误，但作为React新手，我无法弄明白。我的目标是从api获取用户，并在按下按钮后在屏幕上呈现他们的电子邮件和生物。

class App extends Component {
 state = {
   users: []
 }

 async getUser(e) {
   e.preventDefault();
   const username = e.target.elements.username.value;
   const profileResponse = await fetch(`https://api.github.com/users/${username}?client_id=${client_id}&client_secret=${client_secret}`);
   const user = await profileResponse.json();
   this.setState({ users: this.state.users.concat([user]) });
 }

 render() {
 return (
 <div className="App">
   <h1>Search users</h1>
   <p>Enter a username to fetch a user.</p>
   <form onSubmit={this.getUser}>
     <input 
       type="text"
       name="username" 
       placeholder="GitHub username"
     />
     <button>Find User</button>
   </form>

   { this.state.users.length > 0 && this.state.users.map((user) => <p key={user.login}>{user.email, user.bio}</p>) }

 </div>
 );
 }
}
export default App;

错误：

对象无效作为React子对象（找到：带键的对象） {login，id，avatar_url，gravatar_id，url，html_url，followers_url， following_url，gists_url，starred_url，subscriptions_url， organizations_url，repos_url，events_url，received_events_url，type， site_admin，名称，公司，博客，位置，电子邮件，可租用，生物， public_repos，public_gists，followers，following，created_at，的updated_at}）。如果您要渲染一组孩子，请使用而不是数组。

Answer 1

运行您的示例，我收到以下错误：

Uncaught (in promise) TypeError: Cannot read property 'setState' of undefined

将getUser转换为箭头函数修复它：getUser = async (e) => {}

进一步阅读：https://medium.freecodecamp.org/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56

第二个问题：

渲染中的

{user.email, user.bio}无法替换为{user.email} {user.bio}

Answer 2

这就是问题所在：

{user.email, user.bio}

解决方案是：

{user.email}, {user.bio}

此外，您需要确保user.email和user.bio不是对象。

您需要处理从API收到的响应不是用户对象的情况，例如，如果您要查找的用户不存在。

我无法在React App中显示来自GitHub API的用户数据？

2 个答案: