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

Question

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

但是，就我而言，我有一个可以相同的日志字符串数组，并且我正在创建一个这样的语义 UI 列表：

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

我该如何避免这个flattenChildren()问题？

score 2 · Accepted Answer

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

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

要添加密钥，您必须在 List 元素旁边使用 List.Item 来实现语义用户界面

一些代码

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

score 1 · Accepted Answer

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

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

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

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

我建议使用日志条目的唯一 id 或其他独特的东西。

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

2 回答 2