React列表提示需唯一key属性警告，已添加key仍报错如何解决？

核心原因 #

map 遍历返回的每一项的最外层根节点未添加 key 属性，你当前把 key 加在了内层的 div 上，而外层包裹的空片段（<>）才是 map 返回的直接子元素，React 只会校验每一个遍历项直接根节点的 key 属性。

具体错误点 #

• 多余的空片段包裹：你遍历返回的内容只有一个 div 根节点，完全不需要额外套一层 <></> 空片段，这层多余的片段没有 key 是报警告的直接原因
• 无效的重复 key：你给内部的 img、div、ol、按钮容器等元素都加了同一个 idx 作为 key，这部分操作完全多余，key 只需要加在列表遍历项的根节点上，非列表渲染的元素不需要加 key
• 额外建议：如果你的技能列表会有增删、排序操作，不建议用数组索引 idx 作为 key，会导致React 复用节点出错，最好用每个 skill 独有的唯一值作为 key，如果 skill 字符串本身不重复可以直接用 skill 当 key

修复方案 #

直接删掉 map 返回内容外层的 <> 和 </>，保留 div 上的 key 即可，同时可以删掉所有内部元素上多余的 key 属性，修复后核心代码如下：

{inputs.map((skill, idx) => {
  // 删掉外层多余的空片段，直接返回根div
  return (
    <div className="card width: 10rem; mb-3 p-2" key={idx}>
      <div className="card-header text-center mb-4">
        <h5 className="card-title mt-2">{skill}</h5>
      </div>
      <img src="../../logo.svg" className="card-img-top" alt="..." />
      <div className="card-body">
        <div className="card-title text-center mt-2 ">
          {
            isEditing ? (
              <div>
              <EditSkillsForm 
              inputs={inputs} 
              editing={setIsEditing} 
              cancelClick= {handleCancelClick}
              updateInput = {handleUpdateInput}
              currentInput={currentInput}
               />
              </div>
            ) : null
          }
          <ol>
            Skill name: {skill}
          </ol>
        </div>
      </div>
      <div className="card-footer" >
        <div className="row mb-2">
        <button
          className="btn btn-primary w-100"
          onClick={() => handleEditClick(inputs.idx)}>Edit
        </button>
        </div>
        <div className="row">
        <FaTimes className="mb-2" fill="#ffc800" onClick={() => handleDeleteClick(idx)} />
        </div>
      </div>
    </div>
  )
})}

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