我对此真的很陌生,并且我的代码上的一切看起来都很好,但我不断收到“Type '{ dataIndex: string; title: string; defaultFilteredValue: any; filterIcon: Element; filterDropdown: (props: FilterDropdownProps) ”的错误=> Element; render: (value: any, record: Company) => Element; }' 不可分配给类型“IntrinsicAttributes & ColumnProps”。 类型“IntrinsicAttributes & ColumnProps”.ts(2322) 上不存在属性“dataIndex”。 下面是我的 list.tsx 文件的代码块。
import CustomAvatar from '@/components/custom-avatar';
import { Text } from '@/components/text';
import { COMPANIES_LIST_QUERY } from '@/graphql/queries';
import { Company } from '@/graphql/schema.types';
import { CompaniesListQuery } from '@/graphql/types';
import { currencyNumber } from '@/utilities';
import { SearchOutlined } from '@ant-design/icons';
import { CreateButton, DeleteButton, EditButton, FilterDropdown,
List, useTable } from '@refinedev/antd';
import { HttpError, getDefaultFilter, useGo } from '@refinedev/core';
import { GetFieldsFromList } from '@refinedev/nestjs-query';
import { Input, Space, Table } from 'antd';
export const CompanyList = ({children}: React.PropsWithChildren) => {
const go = useGo();
const {tableProps, filters } = useTable<
GetFieldsFromList< CompaniesListQuery>,
HttpError,
GetFieldsFromList<CompaniesListQuery>
> ({
resource: 'companies',
onSearch: (values) => {
return [
{
field: 'name',
operator: 'contains',
value: values.name
}
]
},
pagination:{
pageSize: 12,
},
sorters: {
initial: [
{
field: 'createdAt',
order: 'desc'
}
]
},
filters: {
initial: [
{
field: 'name',
operator: 'contains',
value: undefined
}
]
},
meta: {
gqlQuery: COMPANIES_LIST_QUERY
}
})
return (
<div>
<List
breadcrumb={false}
headerButtons={() => (
<CreateButton
onClick={() => {
go({
to: {
resource:'companies',
action: 'create'
},
options: {
keepQuery: true
},
type: 'replace'
})
}}/>
)}
>
<Table
{...tableProps}
pagination={{
...tableProps.pagination,
}}
>
<Table.Column<Company>
dataIndex="name"
title="Company Title"
defaultFilteredValue={ getDefaultFilter('id', filters)}
filterIcon={<SearchOutlined />}
filterDropdown={(props) => (
<FilterDropdown{...props}>
<Input placeholder= "Search Company" />
</FilterDropdown>
)}
render={(value, record) => (
<Space>
<CustomAvatar shape="square"
name={record.name} src={record.avatarUrl} />
<Text style={{ whiteSpace: 'nowrap'}}>
{record.name}
</Text>
</Space>
)}
/>
<Table.Column<Company>
dataIndex ="totalRevenue"
title="Open deals amount"
render={(value, company) => (
<Text>
{currencyNumber(company?.dealsAggregate?.[0].sum?.value || 0)}
</Text>
)}
/>
<Table.Column<Company>
dataIndex="id"
title="Actions"
fixed="right"
render={(value) =>(
<Space>
<EditButton hideText size="small" recordItemId={value}/>
<DeleteButton hideText size="small" recordItemId={value}/>
</Space>
)}
/>
</Table>
</List>
{children}
</div>
)
}
我尝试检查跟踪“dataIndex”,它存在于另一个文件中,一切看起来都很好,但我真的不知道我能做些什么来解决这个问题。根文件的一部分如下(名为interface.tsx):
export type AlignType = 'start' | 'end' | 'left' | 'right' | 'center' | 'justify' | 'match-parent';
export interface ColumnType<RecordType> extends ColumnSharedType<RecordType> {
colSpan?: number;
dataIndex?: DataIndex<RecordType>;
render?: (value: any, record: RecordType, index: number) => React.ReactNode | RenderedCell<RecordType>;
shouldCellUpdate?: (record: RecordType, prevRecord: RecordType) => boolean;
rowSpan?: number;
width?: number | string;
onCell?: GetComponentProps<RecordType>;
/** @deprecated Please use `onCell` instead */
onCellClick?: (record: RecordType, e: React.MouseEvent<HTMLElement>) => void;
}
您提供给组件的类型,可能是
Table.Column
类型至少包含一个属性 dataIndex
,该组件未设置为处理该属性。该专栏不知道如何处理该属性。如果它是您自己的组件,您可以在组件本身中更改它,否则您必须删除该属性。