我试图在React应用程序中使用MaterialReactTable库设置一个表。但是,在定义表的列时,我遇到了TypeScript类型不匹配错误。
错误信息:
S2322:类型“MRT_ColumnDef<ResponseData,unknown>[]"不可分配给类型”MRT_ColumnDef<MRT_RowData,any>[0]“。类型”MRT_ColumnDef<ResponseData,unknown>"不可分配给类型“MRT_ColumnDef<MRT_RowData,any>[0]”。类型“MRT_ColumnDef<ResponseData,unknown>"不可分配给类型”Omit<ColumnDef<MRT_RowData,any>,“accessorKey”|“aggregatedCell”|“aggregationFn”|“细胞”|“专栏”|“filterFn”|“页脚”|“标题”|“识别码”|“sortingFn”不兼容“。属性”getUniqueValues“的类型不兼容。Type”“|“undefined”不能分配给类型“UnderorFn <MRT_RowData,unknown[]>”|“.无法将类型”“WaveorFn <ResponseData,unknown[]>"赋值给类型”“WaveorFn <MRT_RowData,unknown[]”。类型“MRT_RowData”中缺少属性“data”,但类型“ResponseData”中需要该属性。“
验证码:
import { useMemo } from "react";
import {
MaterialReactTable,
useMaterialReactTable,
type MRT_ColumnDef,
} from "material-react-table";
interface ResponseData {
data: {
date: string;
shift: {
shift: string;
morning: {
machines: {
machineName: string;
operators: {
operatorId: string;
partNames: {
partName: string;
partCount: number;
}[];
}[];
}[];
};
}[];
}[];
}
import { response } from "./dummyResponse";
const Example = () => {
const columns = useMemo<MRT_ColumnDef<ResponseData>[]>(
() => [
{
accessorKey: "date",
header: "Date",
},
{
accessorKey: "shift.shift",
header: "Shift",
},
{
accessorKey: "shift.morning.machines.machineName",
header: "Machine Name",
},
{
accessorKey: "shift.morning.machines.operators.operatorId",
header: "Operator ID",
},
{
accessorKey: "shift.morning.machines.operators.partNames.partName",
header: "Part Name",
},
{
accessorKey: "shift.morning.machines.operators.partNames.partCount",
header: "Part Count",
},
],
[]
);
const table = useMaterialReactTable({
columns,
response,
enableExpandAll: false,
enableExpanding: true,
filterFromLeafRows: true,
initialState: { expanded: true },
paginateExpandedRows: false,
});
return <MaterialReactTable table={table} />;
};
export default Example;
字符串
我已经根据ResponseData接口的结构定义了列,但我仍然得到类型不匹配错误。谁能帮助我了解导致此问题的原因以及如何解决它?
1条答案
按热度按时间hof1towb1#
将接口更改为类型,可能的原因是接口不能被视为ResponseData类型
字符串