reactjs - 在 react 16 中使用相同的键会导致警告，但仍然显示所有项目

Question

在 16 之前，相同的关键组件会被忽略。React 16 如何做到这一点？使用另一个特殊的随机密钥来区分是否相同？

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      users: [{id: 0, name: 'andy'}, {id: 1, name: 'mary'}, {id: 1, name: 'halo'}]
    }
  }

  render() {
    return (
      <div className="App">
        {this.state.users.map((user) => {
          return <div key={user.id}>{user.name}</div>
        })}
      </div>
    );
  }
}

export default App;

我使用 React 16 编译。结果显示如下：

andy
mary
halo

但是如果我在 codepen (react 0.13.0) 中运行代码，我得到了

andy
mary

https://codepen.io/cppalien/pen/ywvmOm/

而且我认为这是对的，因为 react 使用 key 来区分组件，第三个组件 key 与第二个相同，所以它被忽略了。

标签： reactjs

Answer 1

当没有提供键时，它使用索引作为后备。因此，如果元素随后重新排序，它只会影响最终结果。