Question

我只是一般地在寻找答案而没有瞥见代码。循环一次并返回项目时，我在JSON文件中有几个层次的深层对象，键没有问题，但是当我循环两次时，出现键错误。我尝试了许多奇怪的事情，例如在循环一次后用唯一的键返回div并再次在该div内循环以及其他在线建议的东西之后，但是没有用。我应该在React中以某种方式对待不同的嵌套循环，还是有一些规则？

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>
  )
}

反应嵌套循环唯一密钥问题

1 个答案: