React JS数据表获取r.s slice不是一个函数错误消息

Question

我在React JS中使用数据表时遇到了一些问题。

My custom Data Table js:

import React, { Component } from 'react';
import withFixedColumns from 'react-table-hoc-fixed-columns';
import ReactTable from 'react-table';
import Paging from 'components/common/pagination';
import ShowList from 'components/common/showlist';
const ReactTableFixedColumns = withFixedColumns(ReactTable);
class DataTable extends Component {
constructor(props) {
super(props);
this.state = {
page: 0,
pageSize: props.pageSize || 5,
data: props.data || [],
};
}
static getDerivedStateFromProps(props, state) {
// const check = !_.isEqual(props.data, state.data);
const check = props.data !== state.data;
if (check) {
return {
page: 0,
data: props.data || [],
};
}
return null;
}
onChangePageSize = (size) => {
this.setState({
pageSize: size.value,
page: 0,
});
};
onChangePage = (number) => {
this.setState({
page: number,
});
};
render() {
const { page, pageSize, data } = this.state;
const { columns, getTrProps, getTdProps, showListHidden, title, rightTitle, tableClassName, showListPosition, containerClassName, rightHeaderContent, defaultPageSize } = this.props;
const finalPageSize = Math.max(Math.min(pageSize, data.length), defaultPageSize || 3);
const finalData = data.slice(page * finalPageSize, (page + 1) * finalPageSize);
return (
<div className={containerClassName}>
{(!showListHidden || title) && (
<ShowList
pageSize={pageSize}
totalItems={data.length}
onChangePageSize={this.onChangePageSize}
showListHidden={showListHidden}
title={title}
rightTitle={rightTitle}
showListPosition={showListPosition}
rightHeaderContent={rightHeaderContent}
/>
)}
<ReactTableFixedColumns
className={`react__table ${tableClassName}`}
columns={columns}
data={finalData}
pageSize={finalPageSize}
showPagination={false}
sortable={false}
getTrProps={getTrProps}
resizable={false}
getTdProps={getTdProps}
/>
<Paging number={page} totalPages={data.length / pageSize} onClickPager={this.onChangePage} />
</div>
);
}
}
export default DataTable;

我的组件js传入一个填充数组到数据表:

const columns = [
{
Header: 'Old Received Date',
accessor: 'oldReceivedDate',
minWidth: tableColumnWidth.lg,
},
{
Header: 'New Received Date',
accessor: 'newReceivedDate',
minWidth: tableColumnWidth.lg,
},
];
render() {
console.log(auditList);
<div className="paddingBottom50 tabsContainer">
<div>
<DataTable data={auditList || []} columns={columns} />
</div>
</div>
}

我试图打印出auditList，并设法得到以下内容:

auditList: Array(1)
0:
barcodeId: "001333-167"
createdBy: "analyst"
createdDate: "2022-07-07T15:39:06"
inspectionId: "102977-158223"
newCertificationDate: "2022-05-05T13:36:00"
newFirstExaminedDate: "2021-09-04T13:36:00"
newIdentifiedBy: "Analyst"
newReceivedBy: "Admin"
newReceivedDate: "2021-09-04T13:36:00"
oldCertificationDate: "2022-05-05T13:36:00"
oldFirstExaminedDate: "2022-05-05T13:36:00"
oldIdentifiedBy: "Analyst"
oldReceivedBy: "Admin"
oldReceivedDate: "2022-05-05T13:34:00"
updatedBy: "analyst"
updatedDate: "2022-07-07T15:39:06

但是，页面在console.log()之后抛出以下错误:

TypeError: r.slice is not a function
at n.value (116.21668fc3.chunk.js:1:3750)
at Di (11.9c4a903c.chunk.js:1:1800861)
at Ii (11.9c4a903c.chunk.js:1:1800654)
at mc (11.9c4a903c.chunk.js:1:1836565)
at ls (11.9c4a903c.chunk.js:1:1827780)
at cs (11.9c4a903c.chunk.js:1:1827705)
at Jc (11.9c4a903c.chunk.js:1:1824714)
at 11.9c4a903c.chunk.js:1:1776099
at t.unstable_runWithPriority (11.9c4a903c.chunk.js:1:1851680)
at Xa (11.9c4a903c.chunk.js:1:1775808)
overrideMethod @ react_devtools_backend.js:4026

你知道为什么吗?我试图检查使用数据表的现有js，所有这些都工作得很好。

谢谢!

Answer 1

您使用生命周期方法getDerivedStateFromProps的原因不清楚，并且它可能无法实现您想要的目的(当props.data更改时更新状态?)

根据React官方文档

此方法存在于状态依赖于道具随时间变化的极少数用例中。例如，它可能很方便实现一个组件，比较它的previous和next子组件，以决定在其中的哪个动画输入和输出。

为什么不直接从render()的道具中消耗data呢?父组件传入的任何数据更改都会触发重新渲染。

render() {    
const { data } = this.props;
[...]
}