我不断收到“dataIndex 不可分配”错误至

问题描述 投票:0回答:1

我对此真的很陌生,并且我的代码上的一切看起来都很好,但我不断收到“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;
}
reactjs
1个回答
0
投票

您提供给组件的类型,可能是

Table.Column
类型至少包含一个属性
dataIndex
,该组件未设置为处理该属性。该专栏不知道如何处理该属性。如果它是您自己的组件,您可以在组件本身中更改它,否则您必须删除该属性。

© www.soinside.com 2019 - 2024. All rights reserved.