我无法在 React 应用程序中显示来自 GitHub API 的用户数据？答案

【问题标题】：I can't display user data from GitHub's API in a React App?我无法在 React 应用程序中显示来自 GitHub API 的用户数据？
【发布时间】：2018-01-13 01:23:13
【问题描述】：

我知道我的代码中有错误，但作为 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 子对象无效（找到：带键的对象 {登录，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，类型， site_admin，姓名，公司，博客，位置，电子邮件，可雇用，生物， public_repos，public_gists，追随者，关注，created_at，更新_at}）。如果您打算渲染一组孩子，请使用代替数组。

【问题讨论】：

试试{user.email}, {user.bio}</p>，但确保电子邮件和简历不是对象
API 返回一个对象。这与将状态（它是一个数组）设置为从 API 返回的对象有关。但我不知道解决这个问题的最佳方法是什么

标签： javascript reactjs jsx

【解决方案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} 替换

【讨论】：

【解决方案2】：

这是问题：

{user.email, user.bio}

解决办法是：

{user.email}, {user.bio}

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

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

【讨论】：