最新消息:20210917 已从crifan.com换到crifan.org

【已解决】Antd Pro中警告:Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key

JS crifan 978浏览 0评论
折腾:
【未解决】剧本编写系统中优化全部剧本列表页
期间,看到了,之前看到多次的,警告:
index.js:2177 Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.
__stack_frame_overlay_proxy_console__ @ index.js:2177
warning @ browser.js:49
warningOnce @ utils.js:77
Table._this.getRowKey @ Table.js:47
_loop @ BaseTable.js:56
BaseTable._this.renderRows @ BaseTable.js:121
render @ BaseTable.js:162
...
(anonymous) @ bootstrap 480c9888186ec0806962:724
index.js:2177 Warning: Each record in dataSource of table should have a unique `key` prop, or set `rowKey` to an unique primary key,see 
https://u.ant.design/table-row-key
然后基本上有点看懂了:
好像是要设置table的每行,都有个独一无二的key就好。
而具体做法:
原先考虑要不要去:
把Django后台返回的数据,每个都加上一个key,值是index或index+1
但是很麻烦,要在fetch的response中,都要加上才行。
效率低,而且不方便。
而参考官网:
表格 Table – Ant Design
rowKey
表格行 key 的取值,可以是字符串或一个函数
string|Function(record):string
‘key’
所以,可以去设置特定的某个key。
而此处,通过调试可以看出,默认返回的数据中:
都有个独一无二的id,可以用来作为此处的key,很完美,且不用改动apifan的数据,去试试,即可:
如此,即可消除之前的警告了:
如果去掉,则就会有警告:
【总结】
此处Antd Pro中,对于Table,传入的每行Row的data,都要有个独一无二的key -》用来优化内部数据刷新,提高性能的
默认常见的做法是:
在每行的data中,包含一个key,设置index的值(0,1,2,。。。)就确保每行的key都不同了
而此处,如果要给返回的数据去加上key,就要:
要么改动Django后台的API
要么改动Reactjs前端fetch后的response
都很麻烦,而且效率很低
而此处发现Antd Pro中的Table支持传入参数,用于指定key的名字
比如此处的’id’,就正好可以充分利用返回的Script对象中的id -》 是独一无二的,唯一的
就完美的解决了key重复或者没有设置而警告的问题。
相关代码为:
调用:
    return (
      <PageHeaderLayout title="组员剧本列表">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
            <SimpleTable
              loading={loading}
              data={groupOwnerScripts}
              columns={columns}
              scroll={{ x: 1800 }}
              rowKey={'id'}
              onChange={this.handleStandardTableChange}
            />
          </div>
        </Card>
      </PageHeaderLayout>
    );
  }

SimpleTable的定义:
class SimpleTable extends PureComponent {

  render() {
    const { data: { results, count }, rowKey, loading, columns, size, scroll } = this.props;
...
    return (
      <div className={styles.standardTable}>
        <Table
...
          rowKey={rowKey}
...
        />
      </div>
    );
  }
}

SimpleTable.defaultProps = {
  rowKey: 'key',
};

export default SimpleTable;

其中defaultProps用来指定当没有传递rowKey时,默认为’key’

转载请注明:在路上 » 【已解决】Antd Pro中警告:Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
92 queries in 0.171 seconds, using 23.42MB memory