爲動態孩子添加一個獨特的鑰匙，而沒有任何獨特的鑰匙

Question

我在React項目中映射了一些數組，並且返回了li-tag子元素，當然React期望每個動態子元素都有一個唯一的密鑰。但是，我不認爲我有任何獨特的關鍵......至少，我不知道。通過我的數據和代碼（從https://tmi.twitch.tv/group/user/instak/chatters獲取），有沒有我可以通過的任何密鑰？

import React, {Component} from 'react'; 

export default class Overview extends Component{ 
    constructor(props, context){ 
    super(props, context); 
    this.state = { 
     chatters: { 
     moderators: [], 
     staff: [], 
     admins: [], 
     global_mods: [], 
     viewers: [] 
     } 
    }; 
} 

componentWillMount() { 
fetch('/api/overview') // fetch from Express.js server 
    .then(response => response.json()) 
    .then(result => this.setState({ 
    chatters: result.chatters 
    })); 
} 

render(){ 
    let {chatters} = this.state; 
    return (
     <div> 
      <h2>Chatters</h2> 
      <div> 
       <h3>Moderators</h3> 
       <ul> 
       {chatters.moderators.map(chatter => { 
        return <li key={chatter.key}>{chatter}</li>; 
       })} 
       </ul> 
      </div> 
      <div> 
       <h3>Staff</h3> 
       <ul> 
       {chatters.staff.map(chatter => { 
        return <li key={chatter.key}>{chatter}</li>; 
       })} 
       </ul> 
      </div> 
      <div> 
       <h3>Admins</h3> 
       <ul> 
       {chatters.admins.map(chatter => { 
        return <li key={chatter.key}>{chatter}</li>; 
       })} 
       </ul> 
      </div> 
      <div> 
       <h3>Global Mods</h3> 
       <ul> 
       {chatters.global_mods.map(chatter => { 
        return <li key={chatter.key}>{chatter}</li>; 
       })} 
       </ul> 
      </div> 
      <div> 
       <h3>Plebs</h3> 
       <ul> 
       {chatters.viewers.map(chatter => { 
        return <li key={chatter.key}>{chatter}</li>; 
       })} 
       </ul> 
      </div> 
     </div> 
    ); 
    } 
} 

Answer 1

只需使用twitch用戶名。 React不需要一些奇特的鍵，它只需要一個獨特的值，保持相同的個人渲染元素。

例如：

chatters.viewers.map(chatterName => { 
    return <li key={chatterName}>{chatterName}</li>; 
})