reactjs - 反应嵌套循环唯一键问题

Question

我只是在寻找一般的答案，而没有瞥见代码。当循环一次并返回项目时，我在 JSON 文件中有几个级别的深度对象，密钥没有问题，但是当我循环两次时，就会出现密钥错误。我尝试了许多奇怪的事情，比如在循环一次返回具有唯一键的 div 并在该 div 和其他在线建议的东西内再次循环但没有奏效。我应该在反应中以某种方式处理不同的嵌套循环还是有一些规则？

标签： reactjsloopsdictionarydom

Answer 1

如果没有看到一些代码，我无法确定您的具体问题是什么，但是您可能遇到的是嵌套循环中的重复键问题（如果您仅根据内部或外部循环递增设置键，则会发生这种情况价值）。

在这种情况下创建唯一键的一种方法是将键设置为外部和内部递增值的组合。请注意，您的循环可能是 0 索引的，因此乘法将不起作用。下面是一个通用代码示例来解释——它将一些 JSX 元素推送到一个数组中以由 React 组件呈现，并使用i和j变量来设置键：

addElements() {
  const elements = []
  for (let i = 0; i < 10; i++) {
    for (let j = 0; j < 10; j++) {
      elements.push(<div key={`${i}${j}`}></div>)
    })
  }
  return elements
}

render() {
  return (
    <div>{this.addElements()}</div>
  )
}