DetailList fabri c UI вопрос сортировки React Hooks

Question

Я пытаюсь использовать пример из fabri c ui для сортировки столбцов в таблице. Однако я сталкиваюсь с некоторыми проблемами из-за моего ограниченного опыта с ловушками реагирования и реагирования.

функция сортировки выглядит следующим образом:

function  _copyAndSort<T>(items: T[], columnKey: string, isSortedDescending?: boolean): T[] {
        const key = columnKey as keyof T;
        return items.slice(0).sort((a: T, b: T) => ((isSortedDescending ? a[key] < b[key] : a[key] > b[key]) ? 1 : -1));
      }
    const _onColumnClick = (ev: React.MouseEvent<HTMLElement>, column: IColumn): void => {

        const newColumns: IColumn[] = columns.slice();
        const currColumn: IColumn = newColumns.filter(currCol => column.key === currCol.key)[0];
        newColumns.forEach((newCol: IColumn) => {
          if (newCol === currColumn) {
            currColumn.isSortedDescending = !currColumn.isSortedDescending;
            currColumn.isSorted = true;
            setAnnouncedMessage(
                announcedMessage.concat('sorted')
            )
          } else {
            newCol.isSorted = false;
            newCol.isSortedDescending = true;
          }
        });
        const newItems = _copyAndSort(items, currColumn.fieldName!, currColumn.isSortedDescending);
        setColumns(
            {
                columns: newColumns,
            }
        )
    };

столбцы определены следующим образом:

const [announcedMessage, setAnnouncedMessage] = useState('message: ');
    const theColumns = [
        {
            key: 'provider',
            name: 'Provider',
            fieldName: 'provider',
            minWidth: 150,
            maxWidth: 151,
            isResizable: true,
            isCollapsible: true,
            onColumnClick: _onColumnClick
        },
        {
            key: 'provider-display-name',
            name: 'Provider Display Name',
            fieldName: 'provider-display-name',
            minWidth: 150,
            maxWidth: 155,
            isResizable: true,
            isCollapsible: true,
        }
]

const [columns, setColumns] = useState(
        theColumns
    );

Я не разместил во всех столбцах место для сохранения.

При попытке установить состояние я получаю следующую ошибку:

(property) columns: IColumn[]
Argument of type '{ columns: IColumn[]; items: { key: number; provider: string; 'tag-line': string; 'provider-display-name': string; 'appointment-types': string; 'accept-online-bookings': string; 'accept-new-patients': string; edit: string; }[]; }' is not assignable to parameter of type 'SetStateAction<({ key: string; name: string; fieldName: string; minWidth: number; maxWidth: number; isResizable: boolean; isCollapsible: boolean; onColumnClick: (ev: MouseEvent<HTMLElement, MouseEvent>, column: IColumn) => void; } | { ...; })[]>'.
  Object literal may only specify known properties, and 'columns' does not exist in type 'SetStateAction<({ key: string; name: string; fieldName: string; minWidth: number; maxWidth: number; isResizable: boolean; isCollapsible: boolean; onColumnClick: (ev: MouseEvent<HTMLElement, MouseEvent>, column: IColumn) => void; } | { ...; })[]>'.ts(2345)

при попытке установить состояние:

setColumns(
            {
                columns: newColumns,
            }
        )

Также, похоже, не работают методы установки сообщения анонса. Я был бы признателен за любую помощь, если она доступна, так как я довольно застрял, получая эту работу

Answer 1

Я понял, в чем проблема, я должен был определить столбцы как тип IColumn:

const theColumns:IColumn[] = [
        {
            key: 'provider',
            name: 'Provider',
            fieldName: 'provider',
            minWidth: 150,
            onColumnClick: _onColumnClick
        },