javascript - 为动态子项添加唯一键，而无需任何唯一键

Question

我正在 React 项目中映射一些数组，并返回 li-tag 子项，当然 React 期望每个动态子项都有一个唯一的键。然而，我不认为我有任何独特的 key ......至少，据我所知没有。通过我的数据和代码(从 https://tmi.twitch.tv/group/user/instak/chatters 获取)，我可以传递任何 key 吗？

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>;
})