Я пытаюсь перейти на версию 7 response-table https://www.npmjs.com/ пакет / таблица-реакция. В моем существующем коде есть обратный вызов для onSortedChange, но я не могу понять, как воспроизвести это с помощью хуков новой версии 7.

Формат версии 6:

<ReactTable
  onSortedChange={myCallbackFn}
/>

Версия 7:

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow
} = useTable(
    {
        columns,
        data,
        defaultColumn,
        filterTypes
    },
    useFilters,
    useSortBy
);
...

Ценю любые предложения!

2
Martok11 4 Дек 2019 в 22:39

2 ответа

Я потратил пару часов, пытаясь сделать это, а затем понял это через 2 минуты после публикации моего вопроса.

const { state: { sortBy }} = useTable(...)

React.useEffect(() => {
  // `sortBy` changed
}, [sortBy])
4
Martok11 4 Дек 2019 в 22:47

Извините, что вмешался, но мне любопытно, работает ли у вас это полностью. У меня та же проблема, что и у вас, за исключением фильтрации и следования вашему решению, я все еще не заставляю его работать.

Я делаю:

const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    rows,
    prepareRow,
    sortBy,
    filterBy,
} = useTable({
    columns,
    data,
    defaultColumn,
    filterTypes,
},
    useFilters,
    useSortBy

)

React.useEffect(() => {
    console.log('sort by changed: '+sortBy);
  }, [sortBy])

  React.useEffect(() => {
    console.log('filter by changed');
  }, [filterBy]) 

И я получаю оба журнала при начальной загрузке / рендеринге моей таблицы, но не более того, никаких журналов, когда я сортирую или фильтрую свою таблицу. Делали ли вы что-нибудь еще, чего не публиковали?

1
jola 10 Дек 2019 в 12:45
1
Jola - В вашем примере sortBy и filterBy деструктурируются непосредственно из возвращенного экземпляра таблицы. Вместо этого попробуйте деструктурировать из объекта state в возвращенном экземпляре (см. Верхнюю часть моего рабочего ответа). Я не тестировал фильтры, но думаю, что-то вроде: state: { sortBy, filterBy }
 – 
Martok11
12 Дек 2019 в 21:39
Отлично, спасибо за помощь! Работает нормально, с изменением, что filterBy не существует, оно называется filters.
 – 
jola
16 Дек 2019 в 15:02