修复警告///列表中的每个孩子都应该有一个唯一的“关键”道具[重复]答案

【问题标题】：fixing warning ///Each child in a list should have a unique "key" prop [duplicate]修复警告///列表中的每个孩子都应该有一个唯一的“关键”道具[重复]
【发布时间】：2021-12-05 15:29:11
【问题描述】：

我在下面的代码中遇到了同样的问题。我添加了一个认为它合适但仍然收到关键警告消息的密钥。大家好，我在下面的代码中遇到了同样的问题。我添加了一个认为合适但仍然收到关键警告消息的密钥。

你能帮忙吗？
狮子座

import { useState } from "react";
import { FaTimes } from "react-icons/fa";
import EditSkillsForm from "./editSkillsForm";
const SkillsList = ({ inputs, handleDeleteClick, handleCancelClick, handleEditClick, setIsEditing, handleUpdateInput,currentInput}) => {
const [ isEditing, setISEditing ] = useState(false);
  //const [ currentSkill, setCurrentSkill ] = useState({});

 handleEditClick = () =>  {
     setISEditing(true);
     console.log("editing", true)

  }
  

  


  return (

    <div className="col-lg-4 col-sm-6 mb-4">
      <div className="card p-2">
        <div className="card-Header text-center mb-4">
          <h4 className="card-title mt-2">Mastered Skills List</h4>
        </div>

        {inputs.map((skill, idx) => {
          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="..." key={idx} />
                <div className="card-body">
                  <div className="card-title text-center mt-2 " key={idx}>
                    {
                      isEditing ? (
                        <div key={idx}>
                        <EditSkillsForm 
                        inputs={inputs} 
                        editing={setIsEditing} 
                        cancelClick= {handleCancelClick}
                        updateInput = {handleUpdateInput}
                        currentInput={currentInput}
                              
                         />
                        </div>
                      ) : null
                    }
                    {/* <EditSkillsForm inputs={inputs} /> */}
                    <ol key={idx}>
                      Skill name: {skill}
                    </ol>
                  </div>
                </div>
                <div className="card-footer" >
                  <div className="row mb-2" key={idx}>
                  <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)} key={idx} />
                  </div>
                </div>
              </div>
            </>
          )
        }
        )}
      </div>
    </div>
  );
}

export default SkillsList;

【问题讨论】：

React 希望你在片段 <> 上放一个键。从 react 中导入 Fragment 并将您的 <> 和 </> 更改为。然后输入类似<Fragment key={skill}>
了解密钥的用途很重要，否则您可能会遇到问题。 React 专门使用 key 来跟踪附加到该元素数据的 dom 元素。这就是建议不使用索引的原因：从数组中删除一个项目会将索引分配给下一个元素，并且您会看到错误的输出。您需要在数据中使用唯一的东西，例如主键，或者创建唯一键，因为需要组合值。在这种情况下，就像 Dan 所说的那样，它需要在片段上，即地图中的第一个元素。
谢谢@DanZuzevich
@DanZuzevich 有没有办法更轻松地调试它？控制台并不能真正帮助定位问题所在。再次感谢您的帮助

标签： javascript reactjs

【解决方案1】：

对于组件中的所有元素，该键必须是唯一的。我可以看到您在多个 div 元素中使用相同的键 idx，因此它不再是唯一的。除了 idx 值之外，尝试为每个 div 指定一个特殊名称，以使其对每个 div 都是唯一的。

【讨论】：

感谢您尝试@HarounDarjaj