Keying реагируют списки с динамическими свойствами

Question

у меня есть вложенный список:

• Foo
  • бар
    • товар
    • ...
  • Баз
    • товар
    • ...
• QUX
  • ...

генерируется из данных, таких как:

data = { 
    foo: [{ bar: [{id:12345}, ...], baz: [{id: 23456}, ...}]}, {...}] 
    qux: [...], 
    ... 
} 

где значение в используемом в качестве части ключей (foo, bar, baz и qux выше) могут быть отредактированы.

Мой подход к манипуляции:

<ul> 
    {Object.keys(data).sort().map(function(k1) { 
    return [ 
     <li key={'k1-' + k1}><h3>{k1}</h3></li>, 
     <ul> 
     {Object.keys(data[k1]).sort().map(function(k2) { 
      return [ 
      <li key={'k1-' + k1 + '-k2-' + k2}> 
       <h4>{k2}</h4> 
      </li>, 
      <ul> 
       data[k1][k2].map(function(item) { 
       return (<li key={'k3-' + item.id}>blah blah blah</li>); 
       })} 
      </ul> 
      ]; 
     })} 
     </ul> 
    ]; 
    })} 
</ul> 

не обрабатывают случаи, когда k1 и k2 изменений среди существующих значений.

Я попытался использовать индекс списка в функции карты как часть ключа, но имел схожие проблемы, когда длина/порядок списка изменялись при обновлениях. Я также попытался позвонить this.forceUpdate() о соответствующих изменениях состояния, но это, похоже, не помогло.

Есть ли подход к манипуляции ключами, который правильно изменит список при редактировании ключей?

Answer 1

Поскольку вам нужно иметь уникальные ключи только в одном списке, вы можете использовать индексы.

<ul> 
    {Object.keys(data).sort().map(function(k1, i) { 
    return [ 
     <li key={i}><h3>{k1}</h3></li>, 
     <ul> 
     {Object.keys(data[k1]).sort().map(function(k2, j) { 
      return [ 
      <li key={[i,j].join('')}> 
       <h4>{k2}</h4> 
      </li>, 
      <ul> 
       data[k1][k2].map(function(item, k) { 
       return (<li key={[i,j,k].join('')}>blah blah blah</li>); 
       })} 
      </ul> 
      ]; 
     })} 
     </ul> 
    ]; 
    })} 
</ul>