鍵控反應列表帶有動態屬性

Question

我有一個嵌套列表：

• 富
  • 酒吧
    • 項目
    • ...
  • 巴茲
    • 項
    • ...
• 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>