Reactjs 阵列上的反应协调和同级失去焦点

我的应用程序中有一个bug，当对DOM树进行更新时，输入会失去焦点。我知道，这是一个非常常见的错误，但是我找不到我的具体案例，因为我正确地使用了键，我没有在我的渲染方法中创建任何组件，等等

我找到了我的案例的解决方案：虽然一些输入是通过

list.map（…）

呈现的，但受影响的一个被添加为同级，位于该数组旁边

这里可以找到一个例子，但概括起来：

不要做什么：

  <div>
    {this.state.values.map((v, i) => <input value={v} key={i} />)}
    <input
      value=""
      key={this.state.values.length}
      onChange={this.onChange}
    />
  </div>

{this.state.values.map（（v，i）=>）}

解决方案

  <div>
    {this.state.values
      .map((v, i) => <input value={v} key={i} />)
      .concat([
        <input
          value=""
          key={this.state.values.length}
          onChange={this.onChange}
        />
      ])}
  </div>

{this.state.values
.map（（v，i）=>）
康卡特先生([
])}

似乎react会忽略同级元素的

键

，仅仅因为它不在数组中？有人知道里面发生了什么吗？

如React文档所示：

关键点仅在周围数组的上下文中才有意义

所以你说的是对的

React将忽略同级元素的键，因为它不在数组中

---

不在数组中的输入元素的键将被忽略。对于记录，您不应该尽可能多地使用索引键。如果您想了解更多有关风险的信息，请访问了解更多信息！是的，在我的项目中，我使用了模型id，但我在我的示例中使用了这些id，以便更容易理解（我正在做一些很酷的事情，其中“空”输入的键是下一个尚未创建的模型的id。