reactjs TypeScript类型不匹配错误与MaterialReactTable

kd3sttzy  于 5个月前  发布在  React
关注(0)|答案(1)|浏览(53)

我试图在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接口的结构定义了列,但我仍然得到类型不匹配错误。谁能帮助我了解导致此问题的原因以及如何解决它?

hof1towb

hof1towb1#

将接口更改为类型,可能的原因是接口不能被视为ResponseData类型

type ResponseData = {
  data: {
    date: string;
    shift: {
      shift: string;
      morning: {
        machines: {
          machineName: string;
          operators: {
            operatorId: string;
            partNames: {
              partName: string;
              partCount: number;
            }[];
          }[];
        }[];
      };
    }[];
  }[];
}

字符串

相关问题