react报错 Uncaught Invariant Violation: Unable to find node on an unmounted compone

react报错 Uncaught Invariant Violation: Unable to find node on an unmounted compone

在采用ant.design的Table组件时，给table组件赋值了rowkey为id

<Table
  columns={columns}
  dataSource={this.state.data}
  pagination={false}
  rowKey={record => record.id}
/>

默认的data中有初始数据，显示效果如下，这些默认的数据都是有id的

点击新建绘本，新建两个绘本，新建的数据条目没有id，数据格式如下

  newMember = (image, audio) => {
    const newData = [...this.state.data];
    newData.push({
      key: `NEW_TEMP_ID_${this.index}`,
      editable: false,
      isNew: true,
      image: image,
      audio: audio,
    });
    this.index += 1;
    this.setState({ data: newData }, () => {
      this.props.onChange(this.state.data);
    });
  }

新建成功两条绘本数据

此时控制台会报如下警告，当时并不以为然

当时只是新生疑惑，并不清楚怎么会有两条key为2的数据，然后删除第一个条目的时候就没有反应，删除第三个条目成功，再删除第一个条目的时候就报错

后来发现 初始的第一条数据id为2，也就是key为2，后来新建了两条数据，设置了rowkey为id，ant.design的Table组件当检测到rowkey为undefined的情况下会自动将rowkey设置为index，所以第三条数据key为2，与第一条数据相同，导致后来删除数据的时候按照key操作会出现渲染错误的情况，将Table的rowKey设置为index之后就会有不同且唯一的key

//recordKey部分实现
 _this.getRecordKey = function (record, index) {
   var rowKey = _this.props.rowKey;
   var recordKey = typeof rowKey === 'function' ? rowKey(record, index) : record[rowKey];
   (0, _warning["default"])(recordKey !== undefined, 'Table', 'Each record in dataSource of table should have a unique `key` prop, ' + 'or set `rowKey` of Table to an unique primary key, ' + 'see https://u.ant.design/table-row-key');
   return recordKey === undefined ? index : recordKey;
 };