Question

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

我已经找到了我的案例的解决方案：虽然有些输入是通过list.map(...)呈现的，但受影响的一个是作为兄弟添加的，在此数组旁边。

可以在https://codesandbox.io/s/6y7ok9km3w找到一个示例，但总结如下：

什么不该做：

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

解决方案

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

好像反应会忽略兄弟元素的key只是因为它不在数组中？有谁知道那里发生了什么？

Answer 1

与React文档中一样：

键仅在周围数组的上下文中有意义。

所以你说的是正确的

React会忽略兄弟元素的键，因为它不在数组中

不在数组中的input元素的键将被忽略。而对于记录，您不应该尽可能多地使用索引作为键。如果您想了解有关风险的更多信息，请访问https://medium.com/@robinpokorny/index-as-a-key-is-an-anti-pattern-e0349aece318以获取更多信息

阵列和兄弟姐妹的反应调和失去焦点

1 个答案: