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

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

<Tablecolumns={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;};

react报错 Uncaught Invariant Violation: Unable to find node on an unmounted compone相关推荐

hive日志位置（日志定位报错:Failed with exception Unable to move sourcehdfs://namenode/tmp/hive-pmp_bi/h）...
Hive中的日志分为两种 1. 系统日志,记录了hive的运行情况,错误状况. 2. Job 日志,记录了Hive 中job的执行的历史过程. 日志查看方法 1,在本地运行机器上 hive日志存储位置 ...
小程序组件报错Uncaught TypeError: Cannot read property 'name' of undefined
小程序组件报错Uncaught TypeError: Cannot read property 'name' of undefined Component({/*** 组件的属性列表*/propert ...
vue报错 Uncaught (in promise) NavigationDuplicated {_name:““NavigationDuplicated“... 的解决方法
vue报错 Uncaught (in promise) NavigationDuplicated {_name:""NavigationDuplicated"... 的解 ...
Git报错解决：fatal: unable to access ‘https://github.com/...‘: OpenSSL SSL_read:..., errno 10054
Git报错解决:fatal: unable to access 'https://github.com/-': OpenSSL SSL_read: Connection was reset, errn ...
JS报错: Uncaught SyntaxError: Invalid shorthand property initializer
JS报错: Uncaught SyntaxError: Invalid shorthand property initializer 如果你的代码报错以上提示, 那么就去检查一下, 对应的代码是不是把 ...
React报错：Too many re-renders
React报错:Too many re-renders. React limits the number of renders to prevent an infinite loop. Too man ...
js代码中for循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting ‘className‘)
jsfor循环里绑定onclick事件报错Uncaught TypeError Cannot set properties of undefined (setting 'className') 我想要 ...
【问题篇】Springboot解决报错“java.sql.SQLException: Unable to load authentication plugin ‘caching_sha2_passw”
场景:从代码仓库拉取以前的代码,运行时发现报错"java.sql.SQLException: Unable to load authentication plugin 'caching_sh ...
Unity 报错之 ToLua打包:Unable to find tolua DllNotFoundException: tolua
Unity 报错之 ToLua打包:Unable to find tolua DllNotFoundException: tolua 最近在学习使用LuaFramework框架,使用其打出的安卓包运行 ...

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

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

react报错 Uncaught Invariant Violation: Unable to find node on an unmounted compone相关推荐

最新文章

热门文章