ReactJS：使用对象引用作为 {key}？

Question

如何在 ReactJS 中使用对象引用作为 {key}？

我试过这个：

let ruleList = _.map(this.state.rules, function(rule) {
      return <RuleList rule={rule} key={rule} />
    });

但这最终会打印在控制台中：

警告： flattenChildren(...): 遇到了两个具有相同密钥的孩子，.0:$[object Object]。子键必须是唯一的；当两个孩子共享一个密钥时，只会使用第一个孩子。

有没有办法在没有黑客的情况下解决这个问题，例如为每个项目生成 ID？

Answer 1

我也遇到过类似的情况，该对象没有唯一的 id。

我最终根据对象引用生成了项目的 id：

let curId = 1;
const ids = new WeakMap();

function getObjectId(object) {
  if (ids.has(object)) {
    return ids.get(object);
  } else {
    const id = String(curId++);
    ids.set(object, id);
    return id;
  }
}

// Usage
<RuleList rule={rule} key={getObjectId(rule)} />

我知道您提到过您不想生成 ids，但我想我应该分享这一点，因为它是通用的并且不依赖于对象中的任何属性。

Answer 2

更新

对象不能用作键。React js 要求 key 是字符串或数字，并且应该是唯一的。

IMO有两种方法可以解决这个问题（欢迎建议）

选项1

遍历数组并创建唯一索引

var rules = data.rules;
for(var i=0;i<rules.length;i++){
  data.rules[i].key = i;
}

使用此键_.map

let ruleList = _.map(this.state.rules, function(rule) { 
  return <RuleList rule={rule} key={rule.key} />
});

选项2

维护未删除的规则对象的索引数组。

var N = rules.length; 
var arrayOfRules = Array.apply(null, {length: N}).map(Number.call, Number);

当您删除项目时，使用.splice将其删除。

该组件应该看起来像这样

let ruleList = _.map(this.state.rules, function(rule, index) { 
  return <RuleList rule={rule} key={arrayOfRules[index]} />
});

----

由于rule对象没有唯一的属性，并且key需要唯一，因此添加map方法中的index参数。

let ruleList = _.map(this.state.rules, function(rule, index) { // <--- notice index parameter
  return <RuleList rule={rule} key={index} />
});