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

只需使用抽搐用户名。 React不需要一些花哨的键，它只需要是一个唯一的值，对于单个渲染元素保持不变。

示例：

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

为动态子项添加唯一键，而不使用任何唯一键

1 个答案: