react中使用antd的过程即踩坑(警告信息)

1.在使用react-antd,Table组件时报警告,虽然不影响效果但是,对于强迫症的人来说是无法接受的。

react-dom.development.js?cada:506 Warning: Encountered two children with the same key, `null`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

react中使用antd的过程即踩坑(警告信息)_第1张图片

警告信息是:react-dom.development.js?cada:506警告:遇到两个具有相同key“null”的子项。键应该是唯一的,以便组件在更新期间保持其标识。非唯一键可能导致子项重复和/或被忽略-该行为不受支持,并且可能在将来的版本中更改。

这个就是说在组件渲染时子项应该加上key值,并且是唯一的,而且有的key为空,必须有key值且是唯一的(最好别用index下标来当key值)

warning.js?8bf6:6 Warning: [antd: 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

warning.js?8bf6:6 Warning: Each record in table should have a unique `key` prop,or set `rowKey` to an unique primary key.

这个也是key值的警告解决方案就是给Table加上rowKey={(r, i) => (r.id)}这个属性就好了,如果还有的话就是Table的cloum里没加key选项加上就好了

  (r.id)}
          pagination={{
            onChange: this.onChange,
            defaultCurrent:1,
            total:2,
            showQuickJumper:true,
            pageSize:1,
            current:1,
            showTotal: (total, range) => `共${total}页/${range}条数据`

          }}
        />
columns: [
      {
        title: '序号',
        align: 'left',
        width: '20%',
         key: 's', //不要认为序号就不加key值了,就是随便写一个也要加上
        render: (text, record, index) => {
          return (
{index + 1}
) }, }, { title: 'id', dataIndex: 'id', key: 'id', align: 'left', width: '20%', render: (text, record) => { return (
{record.id}
) }, } ]

2.使用版本过低有些废弃的使用了也会有警告

Warning: Please use `require("history").createHashHistory` instead of `require("history/createHashHistory")`. Support for the latter will be removed in the next major release.

警告:请使用'require(“history”).createHashHistory`而不是'require(“history/createHashHistory”)`。对后者的支持将在下一个主要版本中删除。

Warning: [antd: LocaleProvider] `LocaleProvider` is deprecated. Please use `locale` with `ConfigProvider` instead: http://u.ant.design/locale

警告:[antd:LocaleProvider]“LocaleProvider”已弃用。请将“locale”与“ConfigProvider”一起使用:http://u.ant.design/locale

这些警告只需按警告的提示改就好或者更新版

你可能感兴趣的:(React,react-antd,js)