ReactJS中如何为每个<li>元素分配唯一key？附代码求助

核心问题 #

你把key属性加错位置了——React要求key必须绑定在**map循环返回的最外层元素**上，而不是内部的<li>标签。你现在给多个<li>用了同一个element.id当key，同时最外层的用户容器<div id="user">没有key，这才触发了重复key的报错。

修复步骤 #

1. 把key={element.id}移到map返回的最外层<div>上
2. 移除内部所有<li>上的key（这些<li>不是循环生成的，不需要key）

修改后的代码片段：

{userInLive.map((element) => {
    return(
        // 把key放在这里，这是循环的最外层元素
        <div 
            key={element.id}
            id="user" 
            className={theme ? "userDark" : "userLight"}
        >
            <img src={element.icon} alt="user_icon" id="current_user_icon"/>
            <div id="user_global_informations" style={isReduce ? {display: 'none'} : {display: 'visible'}}>
                <ul className="live_user_informations">
                    <li id="username_information">
                        <p style={theme ? { color: 'white'}:{color:'black'}}>{element.username}</p>
                    </li>
                    <li id="game_information">
                        {element.game}
                    </li>
                </ul>
                <ul className="live_current_informations">
                    <li id="inLiveDot">
                        <span id="isInLive"/>
                    </li>
                    <li>
                        <p style={theme ? { color: 'white'}:{color:'black'}}>{element.countViewers}</p>
                    </li>
                </ul>
            </div>
        </div>
    )
})}

额外注意事项 #

• 你当前用uuidv4()生成id是可行的，但要确保不要在组件的render阶段重复生成uuid（比如现在的写法是在数组初始化时生成一次，没问题；如果是在render里生成，会导致每次渲染都生成新id，引发不必要的重渲染）。
• 后续后端提供数据后，直接把element.id替换成后端返回的唯一标识即可，不需要再用uuid。

内容的提问来源于stack exchange，提问作者Pierre Loti