Неожиданное поведение React-Table Filtering: обновляется заголовок таблицы (и сам фильтр) вместо обновления только данных - PullRequest
Новая
       31

Неожиданное поведение React-Table Filtering: обновляется заголовок таблицы (и сам фильтр) вместо обновления только данных

3 голосов
/ 13 июля 2020

Я использую React@16.13.1, React-Table@7.2.1 и Axios@0.19.2, чтобы создать таблицу с нестандартной разбивкой на страницы и фильтрацией на стороне сервера. Пагинация работает нормально, но у меня возникли трудности с фильтрацией. У меня есть два текстовых фильтра по умолчанию, которые фильтруют правильно (они получают правильную информацию с сервера), но я испытываю странное поведение:

  • При нажатии клавиши, когда фильтрация завершена (когда топор ios запрос получает ответ), таблица полностью обновляется, включая заголовок, в котором находятся фильтры (а не только его результаты);
  • Так как он обновляет всю таблицу, текстовое поле, в которое вводил пользователь, теряет фокус и заставляет пользователя повторно выбрать фильтр, чтобы ввести второй символ.

Для фильтрации я использую DefaultColumnFilter, который предлагает React-Table: 

function DefaultColumnFilter({ column: { filterValue, setFilter, id } }) {
  return (
    <input
      value={filterValue || ""}
      onChange={e => {
        setFilter(e.target.value || undefined)
      }}
      placeholder={`Rechercher ...`}
    />
  )
}

Итак, мои вопросы:

  • Как я могу остановить автоматическую фильтрацию после того, как введен всего один символ (я пытался использовать setTimeout, но не смог настроить его для правильной работы .. .)?
  • Как остановить обновление всей таблицы, включая заголовок?

Я создал песочницу с соответствующим кодом здесь: https://codesandbox.io/s/mystifying-shape-3tbn7

1 Ответ

0 голосов
/ 17 июля 2020

Мы наконец разобрались в проблеме. Это не было связано с реактивной таблицей. React-table отлично может выполнять фильтрацию на стороне сервера из коробки.

Проблема была здесь. У нас было: 

// Render the UI for your table
if (pageLoading) return <Loading />

pageLoading было активировано фильтрацией, поэтому мы заменили его на: 

// Render the UI for your table
if (loading) return <Loading />

Мы «стирали» HTML нашей таблицы каждый раз, когда мы использовали фильтры. В тот момент мы заменяли таблицу полосой загрузки ''.

Теперь мы используем другую переменную (загрузка), которая не активируется при фильтрации. Работает как шарм!

...