'這個'問題，而按鈕映射列表reactjs

Question

我映射GET請求的結果。映射工作正常。我得到每個用戶圖片，姓名，甚至是按鈕上的正確標籤。但是，當我按鈕上的console.log，我想獲得用戶的信息。當我點擊按鈕時，它給所有用戶的user_id不是特定的那個。

{filteredEmails.map(user => { 
    return (
    <List> 
     <div className="mail" key={user.user_id}> 
     <ListItem 
      key={user.user_id} 
      disabled={true} 
      leftAvatar={ 
      <Avatar size={80} src={user.picture} /> 
      } 
      rightIconButton={ 
      <RaisedButton 
       label={user.name} 
       primary={true} 
       key={user.user_id} 
       onTouchTap={console.log(user.user_id)} 
       style={style} /> 
      } 
     > 
      <div className="searchContent" key={user.user_id}> 
      <div className="subject">{user.name}</div> 
      <br></br> 
      <div className="from">{user.email}</div> 
      <br></br> 
      <div className="subject">{user.identities[0].provider}</div> 
      </div> 
     </ListItem> 
     </div> 
    </List> 
); 
})} 

Mapping users picture

在上面的圖片，我想按按鈕，並得到user_id或用戶的name。我似乎無法做到這一點。

我的猜測是this上下文的問題，但我目前無法修復它。

Answer 1

您需要的功能傳遞給onTouchTap事件，並結合USER_ID到的值，通過這種方式，只要在按鈕用戶點擊特定USER_ID將獲得通過該功能，然後做console.log()內，它將打印適當的價值。

像這樣：

onTouchTap={() => this._handleClick(user.user_id)} 

定義_handleClick功能是這樣的：

_handleClick(user_id){ 
    console.log(user.user_id) 
} 

您還需要定義的唯一鍵裏面map每個列表項否則會拋出警告，USER_ID便有你可以使用的獨特價值。

寫map這樣的：

{filteredEmails.map(user => { 
    return (
     <List key={user.user_id}> 
      <div className="mail"> 
       <ListItem 
        key={user.user_id} 
        disabled={true} 
        leftAvatar={ 
         <Avatar size={80} src={user.picture} /> 
        } 
        rightIconButton={<RaisedButton 
          label={user.name} 
          primary={true} 
          key={user.user_id} 
          onTouchTap={onTouchTap={() => this._handleClick(user.user_id)}} 
          style={style} /> 
        } 
       > 
        <div className="searchContent" key={user.user_id}> 
         <div className="subject">{user.name}</div> 
         <br></br> 
         <div className="from">{user.email}</div> 
         <br></br> 
         <div className="subject">{user.identities[0].provider}</div> 
        </div> 
       </ListItem> 
      </div> 
     </List> 
    ); 
})}