React渲染列表时如何给自定义组件传递key解决唯一键警告

问题原因 #

你遇到的警告是因为第二层遍历f[key].map返回的CheckBoxInput组件没有添加唯一key属性。而你所说的「key不能作为prop传递」是React的正常特性：key是React内部用于虚拟DOM Diff的保留属性，不会透传给自定义组件本身，只要你不在CheckBoxInput组件内部尝试读取props.key，直接给组件加key属性是完全合法的。

解决方案 #

1. 给内层遍历的CheckBoxInput添加唯一key，优先使用业务层面的唯一值，避免用索引：如果同个分类下的val不会重复，直接用val作为key即可，也可以拼接外层分类名保证全局唯一。
2. 不要在CheckBoxInput组件内部去解构、读取key属性，即可消除「key不能作为prop传递」的提示。
3. 额外优化：外层列表的key也建议替换为业务唯一值（也就是你取的分类名），比数组索引更稳妥，避免列表增删排序时出现渲染异常。另外原来代码中Object.keys(f)返回的是数组，如果单个f对象只有一个分类键，建议取数组第一项使用，避免渲染时出现多余逗号。

修改后的代码示例 #

const filterList = filterBy.map((f, i) => {
    // 取单个f对象的第一个键作为分类名，避免直接使用数组
    const categoryKey = Object.keys(f)[0];
    return (
      <div key={categoryKey || i} className="filter">
        <h4 className="filter__header">{categoryKey}</h4>
        {f[categoryKey].map((val) => {
          return (
            <CheckBoxInput
              // 拼接分类名和选项值作为唯一key，保证全局不重复
              key={`${categoryKey}-${val}`}
              changeVal={(e) => changeValHandler(e, categoryKey)}
              value={val.toLowerCase()}
              label={val}
            />
          );
        })}
      </div>
    );
  });

内容的提问来源于stack exchange，提问作者Nyi Nyi Hmue Aung