Question

我有一个嵌套列表：

的 FOO
- 巴
  - item
  - ...
- 巴兹
  - 项目
  - ...
的 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在现有值之间变化的情况。

我已尝试将map函数中的列表索引用作键的一部分，但是当更新时列表长度/顺序发生更改时，会出现类似的问题。我也尝试在相关的状态变化上调用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>

使用动态属性键入反应列表

1 个答案: