代码之家 › 专栏 › 技术社区 › olivarra1

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

jsx reactjs

olivarra1 · 技术社区 · 6 年前

我的应用程序中有一个bug,当对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>

似乎react会忽略 key 仅仅因为兄弟元素不在数组中,就对其进行排序?有人知道里面发生了什么吗?