React使用Array.prototype.map渲染列表出现重复key警告问题求助

• 核心错误为key属性的赋值写法错误：你代码中写的key={{ index }}实际是将一个对象作为key值传入。React会自动将key转为字符串类型，所有普通对象转为字符串的结果统一为[object Object]，这就导致所有列表项的key完全重复，触发对应警告。
• 补充说明：即使你改成key={index}（把index数值直接作为key），也属于不推荐的写法，当列表存在增删、排序操作时，用index作为key会导致组件状态错乱、渲染性能下降的问题。

优先选择列表项中唯一不变的字段作为key，从你的代码看elem是按钮的显示文本，若elem的值在addCandidate数组中唯一，可以直接用它作为key，修复后的代码如下：

const renderCondidate = () => {
    if (addCandidate.length) {
      return addCandidate.map((elem, index) => {
        return (
          // 用唯一的elem作为key
          <CFooter style={{ display: "flex" }} key={elem}>
            <CForm className="form-horizontal" style={{ width: "100%" }}>
              <CFormGroup
                style={{ width: "100%" }}
                row
                className="condidateContainrer"
              >
                <CCol md="3 mt-2">
                  <button
                    type="button"
                    className="btn btn-success"
                    onClick={() => {
                      deleteCondidate(elem);
                    }}
                  >
                    {elem}
                  </button>
                </CCol>
                <CCol md="8 mt-2">
                  <CCallout color="danger">
                    {" "}
                    More Informations will appear here fefef ef
                    effefvgegezgezgnjz
                  </CCallout>
                </CCol>
              </CFormGroup>
            </CForm>
          </CFooter>
        );
      });
    }
  };

如果elem存在重复的情况，可以给数组每一项加唯一id字段，用id作为key，只有当列表完全不会变更时，才可以用key={index}的写法。

内容的提问来源于stack exchange，提问作者SEMER BEN SALEM