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;
};