我無法在React App中顯示來自GitHub API的用戶數據嗎？

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子對象無效（找到：帶有以下關鍵字的對象{登錄，id，avatar_url，gravatar_id，url，html_url，followers_url，following_url，gissurl，starred_url，subscriptionsURL，organizations_url，repos_url，events_url，received_events_url，類型，site_admin，名稱，公司，博客，位置，電子郵件，可出租的，個人簡歷，public_repos，public_gists，關注者，關注者，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接收到的響應不是用戶對象的情況，例如，如果您要查找的用戶不存在。