如何修复'flattenChildren（...）：使用React和Semantic UI遇到具有相同键的两个孩子

Question

我了解此问题的解决方案是向您的元素添加key={}。

但是，在我的情况下，我有一组可以相同的日志字符串，我正在创建一个像这样的语义UI列表：

<List items={logItems}></List>

如何避免flattenChildren()问题？

Answer 1

您必须找到一种唯一标识资源的方法

例如，如果要渲染日志列表，可以使用生成日志的日期作为键，或者在最坏的情况下，如果您没有该日志的id，则创建日志的日期，您可以使用该数组中的索引作为键（当您在客户端修改数组时，最后一种方法会带来一些问题）

要添加密钥，您必须将List.Item与List元素一起用于semantic-ui

部分代码

<List>
  {logs.map((log, index) => <List.Item key={log.createdDate /* or index */}>
      {log}
    </List.Item>
  )}
</List>

Answer 2

items是一个速记集合，需要unique keys。下面的代码是相同的，因为引擎盖下的工厂会从值生成密钥。

<List items={['foo', 'bar']} />
<List items={[{ content: 'foo', key: 'bar' }, { content: 'bar', key: 'bar' }]} />

因此，如果您将放置一系列非唯一项目，您将收到React的警告。当然，您可以使用数组索引作为键，但它是antipattern。

<List items={items.map(item, i) => ({ content: item, key: i }))} />

我建议使用唯一的日志条目ID或其他独特的名称。

<List items={items.map(item, i) => ({ content: item.log, key: item.uuid }))} />