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

如何在ReactJS中将对象引用用作{key}

我试过这个：

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

let ruleList=\uu.map（this.state.rules，函数（rule）{
返回
});

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

警告：FlattChildren（…）：遇到两个具有相同 键，

.0:$[object object]

。子密钥必须是唯一的；两岁时 子项共享密钥，仅使用第一个子项

有没有办法不用为每件物品生成ID之类的黑客来解决这个问题？

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

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

选择1 遍历数组并创建唯一索引

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

选择2 维护未删除的规则对象的索引数组

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

删除项目时，请使用将其删除

组件应该是这样的

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

let ruleList=u.map（this.state.rules，函数（规则，索引）{
返回
});

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

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

---

let ruleList=uu.map（this.state.rules，function（rule，index）{/为什么坚持使用rule对象作为键

最简单的解决方案是使用从下划线映射函数返回的索引。如下所示：

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

let ruleList=\ uu.map（this.state.rules，函数（规则，索引）{
返回
});

这是一个与map函数相关的例子。
我遇到过类似的情况，对象没有唯一的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)} />

设curId=1；
const id=new WeakMap（）；
函数getObjectId（对象）{
if（id.has（object））{
返回id.get（对象）；
}否则{
const id=字符串（curId++）；
id.set（对象，id）；
返回id；
}
}
//用法

我知道你提到你不想生成ID，但我想我会分享这个，因为它是通用的，不依赖于对象中的任何属性。
我创建了一个库来解决这个问题。它基于@amann（使用weakMap）提出的想法。它提供了一个钩子，以便使用组件创建和销毁weakMap

看看

从'react key from object'导入{useKeyGen}
常数DogList=（）=>{
const keyGen=useKeyGen（）；
返回(

{dogs.map（（dog）=>(

{dog.name}
-
{狗的年龄}

))

);
}
规则对象是否具有唯一的属性？您能否提供规则对象外观的示例？{rules:[…]，collapsed:true，limit:5000}我是在询问规则对象。意思是，规则数组中有一项。{type:'block'，value:'a string'}这不起作用。当删除之前有内容的项目时，规则引用会与前一个项目的引用发生冲突。所有对象是否都不同？在这种情况下，使用stringify可能会有所帮助。如下所示：
key={JSON.stringify（rule）}
Index as-a-key是一个反模式@marizikmund这非常有效。我们试图根据过滤器散列的更改强制子组件重新渲染。这做得非常好。干杯。这不起作用。当删除之前有内容的项目时，规则引用会与前一个项目的引用发生冲突。我是sor呃，我不太明白。你能再解释一下吗？如果你有[1,2,3,4]，你去掉了1，你会得到[1,2,3]，而不是[2,3,4]。
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)} />

import { useKeyGen } from 'react-key-from-object'

const DogList = () => {
  const keyGen = useKeyGen();

  return (
    <ul>
      {dogs.map((dog) => (
        <li key={keyGen.getKey(dog)}>
          {dog.name}
          -
          {dog.age}
        </li>
      ))
    </ul>
  );
}