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)} />

我知道你提到你不想生成 id，但我想我會分享這個，因為它是通用的，不依賴於你對象中的任何屬性。

Answer 2

更新

對象不能用作鍵。 React js 要求鍵是字符串或數字，並且應該是唯一的。

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} />
});

Answer 3

我創建了一個旨在解決這個問題的庫。 它基於@amann 建議的想法（使用weakMap）。 它提供了一個鈎子，以便用組件創建和銷毀 weakMap。

看看https://www.npmjs.com/package/react-key-from-object

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>
  );
}

Answer 4

為什么堅持使用規則對象作為key呢？

最簡單的解決方案是使用從下划線映射函數返回的索引。 像這樣：

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

這是與地圖功能相關的類似主題。